1. 利用css3新属性scale(好用推荐)
其实现的关键就是利用before或after伪元素,宽高同时设为200%,然后再缩放0.5,自然就是0.5px了
代码如下:
div { positon : relative; } div::after { content : ""; width : 200%; height : 200%; position : absolute; top : 0; left : 0; 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,如果有个按钮要加,而且还有圆角,那就无能为力了