目录
1、淘宝实现方式 transform: scale(0.5)
1、淘宝实现方式 transform:
scale(0.5)
实现方法:
淘宝的实现方式即
rem
+viewport
缩放来实现。transform:
scale(0.5)
CSS
代码:
div {
width: 1px;
height: 100%;
display: block;
border-left: 1px solid #e5e5e5;
-webkit-transform: scale(.5);
transform: scaleX(.5);
}
缺点:
圆角无法实现,实现4条边框比较麻烦,并且只能单独实现。如果嵌套,会对包含的效果产生不想要的效果,所以此方案配合:after和before独立使用较多。
2、对阴影处理
box-shadow
实现方法:
利用CSS对阴影处理的方式实现0.5px的效果。
CSS
代码:
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
优点:
基本所有场景都能满足,包含圆角的button,单条,多条线。
缺点:
颜色不好处理, 黑色 rgba(0,0,0,1) 最深的情况了。有阴影出现,不好用。
大量使用box-shadow可能会导致性能瓶颈。
四条边框实现效果不理想。
3、图片实现 background-image
实现方法:
使用 background-image 实现1px有两种方式:
① 渐变 linear-gradient 或直接使用图片(base64)
② 渐变 linear-gradient (50%有颜色,50%透明)
单条线:
div {
height: 1px;
background-image:-webkit-linear-gradient(top,transparent 50%,#000 50%);
background-position: top left;
background-repeat: no-repeat;
background-size: 100% 1px;
}
多条线:
div {
background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%),
-webkit-linear-gradient(bottom, transparent 50%, #000 50%),
-webkit-linear-gradient(left, transparent 50%, #000 50%),
-webkit-linear-gradient(right, transparent 50%, #000 50%);
background-size: 100% 1px,100% 1px,1px 100%,1px 100%;
background-repeat: no-repeat;
background-position: top left, bottom left, left top, right top;
}
优点:
可以设置单条,多条边框;可以设置颜色
缺点:
大量使用渐变可能导致性能瓶颈;代码量大;多背景图片有兼容性问题