css 0.5px

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，如果有个按钮要加，而且还有圆角，那就无能为力了

巴特西

css 0.5px

最新文章

热门文章