介绍在这里插入代码片& lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,& lt; meta charset=皍tf-8"比;
,& lt; title> 0.5 px线实现方法& lt;/title>
,& lt; style 类型=拔谋?css"比;
,/*标准1 px边框*/,.b1 {
40岁,身高:px;
,边界:1 px solid # ff0000;
,}/* 1。可以利用利用渐变样式=祝辞实现.5px */,.a1 {
,身高:1 px;
,margin-top: 20 px;
,背景图片:线性渐变(0度,,# f00 50%, transparent 50%);
,}/* 2。可以利用缩放——发虚=祝辞实现.5px */,.a2 {
,身高:1 px;
,margin-top: 20 px;
,背景颜色:# f00;
,-webkit-transform:写入scaleY (5);
,变换:写入scaleY (5);
,}/* 3。四条边框都需要的样式*/,.scale-half {
,margin-top: 20 px;
,身高:100 px;
,边界:1 px solid # f00;
,-webkit-transform-origin: 0, 0;
,transform-origin: 0, 0;
,-webkit-transform:规模(5,5);
,变换:规模(5,5);
,}/* 4。给伪元素添加设置边框*/,.border3 {
,位置:相对;
,}
之前,.border3: {
,内容:& # 39;& # 39;;
,位置:绝对;
,宽度:200%;
,高度:200%;
,边界:1 px solid 蓝色;
,-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:规模(5,5);
,-ms-transform:规模(5,5);
,-o-transform:规模(5,5);
,变换:规模(5,5);
,-webkit-box-sizing: border-box;
,-moz-box-sizing: border-box;
,box-sizing: border-box;
,}
,& lt;/style>
& lt;/head>
& lt; body>
& lt; div 类=癰1"祝辞正常1 px边框& lt;/div>
& lt; div 类=癮1"祝辞& lt;/div>
& lt; div 类=癮2"祝辞& lt;/div>
& lt; div 类=皊cale-half"祝辞& lt;/div>
& lt; div 类=癰order3"祝辞
,& lt; div 类=癱ontent"在伪类设置的边框& lt;/div>
& lt;/div>
& lt;/body>
& lt;/html>
这篇文章将为大家详细讲解有关css实现0.5 px线条解决移动端兼容问题的案例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
【内容:
1只利用背景图像渐变样式
2。可以利用规模缩放
3。给伪元素设置边框
关于“css实现0.5 px线条解决移动端兼容问题的案例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
