<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 背景 */
section {
position: relative;
width: 500px;
height: 300px;
background: #ccc;
margin: 100px auto;
}
/*参考线*/
.sol {
position: absolute;
height: 1px;
width: 200px;
margin-top: 40px;
margin-left: 100px;
background-color: rgb(38, 255, 0);
}
/*缩放 */
.outer {
position: absolute;
margin-top: 60px;
margin-left: 100px;
height: 1px;
width: 200px;
background-color: red;
transform: scaleY(0.5);
transform-origin: 50% 100%;
}
/* 默认缩放是从中点开始的，所以要改变缩放的位置 */
/*box-shadow*/
.aa {
position: absolute;
margin-top: 80px;
margin-left: 100px;
width: 200px;
background: #000;
}
.bs {
height: 1px;
background: none;
box-shadow: 0 0.5px 0 yellow;
}
/*线性渐变*/
.bb {
position: absolute;
margin-top: 100px;
margin-left: 100px;
width: 200px;
height: 1px;
}
.lin {
background: linear-gradient(0deg, #000, transparent 50%);
}
/* border 设置上边框 */
.cc {
position: absolute;
margin-top: 120px;
margin-left: 100px;
width: 200px;
background: none;
}
.bo {
border-top: 0.5px solid blue;
}
/* svg文件描边 */
.dd {
position: absolute;
margin-top: 140px;
margin-left: 100px;
}
.svg {
background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='orange' x='0' y='0' width='1' height='0.5'/></svg>");
height: 1px;
width: 200px;
}
</style>
</head>
\
<body>
<section>
<!-- 参考线 -->
<div class="sol"></div>
<!-- 利用 transform缩放-->
<div class="outer"></div>
<!-- 利用box-shadow: 设置box-shadow的第二个参数为0.5px，表示阴影垂直方向的偏移为0.5px -->
<!-- 这个方法在谷歌和火狐都非常完美，但是苹果不支持小于1px的boxshadow，所以完全没显示出来。 -->
<div class="bs aa"></div>
<!-- 利用线性渐变 渐变角度从下往上 从黑渐变到到透明色 达成看起来0.5px直线的效果-->
<div class="lin bb"></div>
<!-- 设置上边框 背景无 不适合谷歌浏览器-->
<div class="bo cc"></div>
<!-- svg文件 使用svg的rect元素画线 fill表示颜色 svg描边属性的1px -->
<div class="svg dd"></div>
</section>
<!--
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
-->
</body>
效果如下：
