实现比1px更细的边框线css样式写法

在网页设计中，可能百分之九十以上的人都只知道最细的线就是1px了吧，不管是做分隔线、边框线还是其它的细节设计，都需要使用到这种细线。但是你知道除了1px还可以写出比1px更细的线吗。今天博客就来教大家如何写出比1px更细的线条。

首先我们回顾一下1px的边框写法：

.line{
	border-bottom:1px solid red;
}

我们定义了一个类名为“line”的元素，然后给它的底部加上了一条1像素的实线，颜色命名为红色。

但是，现在我们想要一条更细的线条，比如说0.5像素。这在一般情况下是无法实现的，因为浏览器无法显示比1像素更细的线。但是，我们可以使用CSS3提供的一个属性来解决这个问题。

这个属性就是“transform: scaleY(0.5)”。代码如下：

.line{
	border-bottom:1px dashed red;
	transform: scaleY(0.5);
}

使用了transform属性，将这条虚线的纵向缩放到原来的一半，也就是0.5像素，实现了比1像素更细的线条。

需要注意的是，这个方法只适用于纵向的线条，如果是横向的线条则无法实现。同时，这个方法只适用于Chrome和Safari等浏览器，而在IE和Firefox等浏览器中可能无法正常显示。