Skip to content

[css] 第105天 怎么实现移动端的边框0.5px？ #1002

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
haizhilin2013 opened this issue Jul 29, 2019 · 4 comments
Open

[css] 第105天 怎么实现移动端的边框0.5px？ #1002

haizhilin2013 opened this issue Jul 29, 2019 · 4 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第105天 怎么实现移动端的边框0.5px？
@haizhilin2013 haizhilin2013 added the css css label Jul 29, 2019
@LinStan
Copy link

LinStan commented Jul 30, 2019

一种是通过transform中的scale

    border: 1px solid red;
    transform: scaleY(.5);

一种是通过meta viewport中设置init-scale为0.5
<meta name="viewport" content="width=device-width, initial-scale=0.5">
一种是设置hr

    border: 0px;
    border-bottom: 1px solid red;

一种是基于背景渐变实现

    height: 2px;
    background-image: linear-gradient(0deg, red 50%, transparent 50%)

@EragonBubble
Copy link

1.伪类:after + 缩放

li:after {
			content: "";
			display: block;
			position: absolute;
			left: -50%;
			width: 200%;
			height: 1px;
			background: red;
			transform: scale(0.5);
			-webkit-transform: scale(0.5);
		}
  1. 背景渐变，一半颜色，一半透明
  .bg-half {
			height: 1px;
			background-image: linear-gradient(0deg, red 50%, transparent 50%);
		}

@haizhilin2013 haizhilin2013 mentioned this issue Aug 9, 2020
Open
@yangyingwx
Copy link 

.border { border: 0.5px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.25px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.166667px solid #999 }
}

@ferrinweb
Copy link

border: thin solid #e2e2e2;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@ferrinweb @haizhilin2013 @EragonBubble @yangyingwx @LinStan