在PC端用1px的边框线,看起来还好,但在手机端看起来就很难看;iphone 可以设置border:solid 0.5px red;
;android会把0.5px视为0px,即无边框状态;
2.利用css3新属性scale
给需要加边框的元素插入一个伪类,伪类采用绝对定位,宽高设为200%,然后再缩放为0.5,自然就是0.5px了
<div class="test1"></div>
.test1{
width: 100px;
height: 100px;
position: relative;
}
.test1::after{
content:"";
width:200%;
height:200%;
position:absolute;
top:0;
left:0;
border:1px solid red;
-webkit-transform : scale(0.5);
transform : scale(0.5);
-webkit-transform-origin : 0 0;
transform-origin : 0 0;
box-sizing: border-box;
}
复制代码
副作用 - - - 加分题很重要哦!
当用伪类的绝对定位实现了边框0.5px后,我们在test1
类上的点击事件会失效,因此此时的伪类是绝对定位,而且长宽等于父类元素的长宽,是脱离了文档流覆盖在父类上的,伪类不是真实的DOM元素。
解决方法
再写一个绝对定位元素,覆盖在父元素上,层级z-index
优先级要高一点
<div class="test1"></div>
.test1{
width: 100px;
height: 100px;
position: relative;
}
.test1::after{
content:"";
width:200%;
height:200%;
position:absolute;
top:0;
left:0;
border:1px solid red;
-webkit-transform : scale(0.5);
transform : scale(0.5);
-webkit-transform-origin : 0 0;
transform-origin : 0 0;
box-sizing: border-box;
}
.click-test1{
position:absolute;
top:0;
left:0;
z-index:10;
}
复制代码
- 利用
background-image
利用背景渐变linear-gradient来实现,具体代码如下:
.test1 {
background-image: -webkit-linear-gradient(0deg,red,red 50%,transparent 50%);
background-image : linear-gradient(0deg,red,red 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
}
复制代码
分析
`linear-gradient`默认方向从上到下,从0deg到50%的地方颜色是边框颜色,然后下边一半颜色就是透明了-没颜色。中间之所以两个50%写在一起,是因为这样就不会有颜色过渡的渐变效果了,看起来更像一条线,泾渭分明; 然后最关键的是下边的`background-size: 100% 1px;`,就是宽度100%,但高度是1px,注意这里的1px自然是css像素了,加上上边的`background-image`,实际效果就是一半有颜色,一半那不就是0.5px,然后再去掉`repeat`,就实现了。同理如果要写border-left
或border-right
一样的原理,只需改变方向就可以了。
方向:0deg 、90deg 、180deg 、-90deg
缺点
只能做单方向的`border`,如果有个按钮要加,而且还有圆角,那就无能为力了
- 使用
box-shadow
模拟边框
利用css 对阴影处理的方式实现0.5px的效果 样式设置:
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
// 0px:代表垂直方向。 0代表无线段 1px代表左面 -1px代表右面
-1px:代表水平方向。 0代表无线段 1px代表上面 -1px代表下面
后面的两个分别代表[模糊距离][阴影的大小] 无须改动
复制代码
参考资料: