【css】画一条0.5px的直线
理论上px的最小单位是1，但有时候需要高清显示，就会使用到0.5px。效果对比图：直接设置0.5px，在不同的浏览器会有不同的表现，所以最完美的方法，是使用transform属性进行缩放。参考博客：怎么画一条0.5px的边...
·
理论上px的最小单位是1，但有时候需要高清显示，就会使用到0.5px。
效果对比图：
直接设置0.5px，在不同的浏览器会有不同的表现，所以最完美的方法，是使用transform属性进行缩放。
<!DOCType html>
<html>
<head>
<meta charset="utf-8">
<style>
.hr {
width: 300px;
background-color: #000;
}
.scale-half {
height: 1px;
transform: scaleY(0.5); /* 延Y轴缩小1倍 */
transform-origin: 50% 100%; /* 改变元素变形的原点 */
}
.hr.half-px {
height: 0.5px;
}
.hr.one-px {
height: 1px;
}
</style>
</head>
<body>
<p>1px + scaleY(0.5)</p>
<div class="hr scale-half"></div>
<p>0.5px</p>
<div class="hr half-px"></div>
<p>1px</p>
<div class="hr one-px"></div>
</body>
</html>
效果图：
transform-origin属性：更改一个元素变形的原点。
scale：指定属性transform缩放的比例
/* 设定比1大的数值使该元素变大 */
scale: 2;
/* 设定比1小的数值使该元素缩小 */
scale: 0.5;
/* 延X、Y轴放大和缩小 */
scale: 2 0.5;
transform：允许旋转rotate，缩放scale，倾斜skew或平移translate元素。
参考博客：怎么画一条0.5px的边
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
3
0- 0
已为社区贡献5条内容
所有评论(0)