1. 利用css3新属性scale(好用推荐)

其实现的关键就是利用before或after伪元素,宽高同时设为200%,然后再缩放0.5,自然就是0.5px了

代码如下:

div {
positon : relative;
}
div::after {
content : "";
width : 200%;
height : 200%;
position : absolute;
top :;
left :;
border : 1px solid #dedede;
-webkit-transform : scale(0.5);
transform : scale(0.5);
-webkit-transform-origin : 0 0;
transform-origin : 0 0;
box-sizing: border-box;
}

2. 利用background-image

如果你问切图直接用背景图可不可以?当然可以,虽说这种方法比较笨吧,但也是一种方法。

但我要说的是另外一种--利用背景渐变linear-gradient来实现,具体代码如下:

.bg_border {
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一样的原理,只需改变方向就可以了。

缺点: 只能做但方向的border,如果有个按钮要加,而且还有圆角,那就无能为力了

05-27 23:24