css实现0.5像素的底边框。

时间：2020-05-07 15:26:21 阅读：72 评论：0 收藏：0 [点我收藏+]

由于设计图的1px在移动端开发中的像素比是2倍，在实际开发中却是需要1px的线条，虽然最直接的方式是将线条设置为0.5px，但有些移动端对于0.5px的解析为0，变成了无边框的显示。因此处理该需求我们可以使用css3提供的缩放属性和伪类选择来实现1px。

例：

html:

<div class="border">
　　<div class="content">设置1px的边框</div>
</div>

css:

.border{
　　position: relative;
}

.border:after

　　content: ‘‘;

　　position: absolute;

　　width: 200px;

　　border-bottom: 1px solid red;

　　-webkit-transform-origin: 0 0;

　　-moz-transform-origin: 0 0;

　　-ms-transform-origin: 0 0;

　　-o-transform-origin: 0 0;

　　transform-origin: 0 0;

　 -webkit-transform: scaleY(0.5);

　　-ms-transform: scaleY(0.5);

　　-o-transform: scaleY(0.5);

　　transform: scaleY(0.5);

　　-webkit-box-sizing: border-box;

　　-moz-box-sizing: border-box;

　　box-sizing: border-box;

除了使用伪类的方式，也可以创建高度为1px的div线条，并将其缩放为0.5的线条，使用时进行位置设置。

例：

html:

css:

.border{
　　width:200px;
　　border-bottom: 1px solid #000;
　　transform: scaleY(0.5);
}

(*^▽^*)

原文：https://www.cnblogs.com/min77/p/12843288.html

踩

(0)

评论一句话评论（0）

分享档案

更多>