css 小于像素 |渐变折扇css

有时候大家需要把文本框或者按钮等元素的边框大小设置为 0.5px 或者 0.3px，但是在实际应用中，这些小于 1px 的像素值往往无法正常显示，甚至有些浏览器会对它们取整或者四舍五入。所以大家需要使用一些技巧来处理这个问题。

.button {
width: 100px;
height: 30px;
border: 0.5px solid #999;
background: #fff;
}

大家可以使用以下两种方法来解决小于 1px 的问题。第一种方法是使用 CSS3 的 transform 属性。大家可以将元素缩小一半，然后再放大一倍，这样就可以达到 0.5px 的效果了。

.button {
width: 100px;
height: 30px;
border: 1px solid #999;
background: #fff;
transform: scale(0.5);
transform-origin: top left;
}

第二种方法是使用伪元素。大家可以创建一个伪元素，将其设置为 1px，然后再把元素缩小一倍。这样就可以实现小于 1px 的效果了。

.button {
position: relative;
width: 100px;
height: 30px;
background: #fff;
}
.button:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
border: 0.5px solid #999;
transform: scale(0.5);
transform-origin: top left;
}

以上两种方法都可以实现小于 1px 的效果，具体可以根据实际情况选择。同时，还需要考虑到浏览器兼容性，毕竟不是所有的浏览器都支持这些特性。