这是我参与11月更文挑战的第4天,活动详情查看:2021最后一次更文挑战
在移动端web页面中,1px的问题是一个常见的问题,总结一些解决移动端web的1px方法以及对应API介绍
border-image
border-image
CSS属性允许在元素的边框上绘制图像
语法
border-image: image-source image-height image-width image-repeat
复制代码
设置1px
.border-top {
border-width: 1px;
border-image: url('xxx') 2 repeat;
}
复制代码
使用 border-image
时,其将会替换掉border-style
属性所设置的边框样式。虽然规范要求使用 border-image
时边框样式必须存在,但一些浏览器可能没有实现这一点。
特别注意,若 border-image-source
(此值可用border-image-source或border-image简写设置) 的值为 none 或者图片不能显示,则将应用 border-style
优点:兼容性好
缺点:灵活性差,每次更改都需要更换图片
linear-gradient
利用渐变实现1px,50%黑色,50%透明
.border-top {
background: linear-gradient(1deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat;
}
复制代码
优点:实现简单,颜色可控
缺点:无法实现圆角,有兼容性问题(现在兼容性问题基本可忽略)
box-shadow
box-shadow
属性用于在元素的框架上添加阴影效果,可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。
在使用box-shadow时,需要注意不同数量的属性值代表不同的含义
- 如果只存在两个属性值,会将其作为
offerset-x
和offerset-y
- 如果存在三个属性值,会将前两位作为
offerset-x
和offerset-y
,第三个值作为blur-radius
- 如果存在四个属性值,第四个将会作为
spread-radius
.border-top {
box-shadow: 0px -1px 1px -1px rgb(0 0 0 / 50%);
}
复制代码
优点:实现简单,颜色可控
缺点:颜色控制较为难拿捏,会有阴影描边出现
伪元素 + transfrom
如果直接对DOM使用transfrom
进行缩放,会连带着内部的所有元素被缩放,影响原有的布局结构和字体大小,使用伪元素遍可以避免这个问题,因为伪元素::after
或::before
是独立于当前元素,可以单独对其缩放而不影响元素本身的缩放
.border-top {
position: relative;
}
.border-top::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
border-top: 1px solid #000;
transform: scaleY(.5);
transform-origin: left top;
}
复制代码
由于现在市面存在多种DPR
设备,上述代码不能很好的兼容,因此需要搭配媒介查询使用,针对不同的DPR
设备进行缩放
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border-top::after {
/* 省略无关代码 */
transform: scaleY(.5);
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border-top::after {
/* 省略无关代码 */
transform: scaleY(1 / 3);
}
}
复制代码