1.scale方法
{ height: 1px; transform: scaleY(0.5); transform-origin: 50% 100%; // 要指定origin值, 要不然会模糊 content: ""; position: absolute; 100%; left: 0; bottom: 0; background: red; }
2.线性渐变linear-gradient, 流览器上面都不完美,效果都是虚的,和完美的0.5px还是有差距
3.使用boxshadow
4.使用SVG
二.几种效果
<!DOCType html> <html> <head> <meta charset="utf-8"> <style> .hr { 300px; background-color: #000; } .hr.half-px { height: 0.5px; } .hr.one-px { height: 1px; } .hr.scale-half { height: 1px; transform: scaleY(0.5); transform-origin: 50% 100%; } .hr.gradient { height: 1px; background: linear-gradient(0deg, #ccc, #000); } .hr.boxshadow { height: 1px; border-radius: 50px; background: none; box-shadow: 0 0.5px 0 #000; } .hr.svg { background: none; height: 1px; /*background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='red' x='0' y='0' width='1' height='0.5'/></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='red' x='0' y='0' width='1' height='0.5'/></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 x='0' y='0' width='1' height='0.5' fill='#cccccc'></rect></svg>"); background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>"); background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg=="); } </style> <meta name="viewport" content="width=device-width"> </head> <body> <p>svg</p> <div class="hr svg"></div> <p>box-shadow: 0 0.5px 0 #000</p> <div class="hr boxshadow"></div> <p>linear-gradient(0deg, #fff, #000)</p> <div class="hr gradient"></div> <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> <script> let div = document.createElement("div"); div.style.height = "0.5px"; //document.body.appendChild(div); console.log(div.clientHeight); div.style.boxShadow = "0 0.5px 0 #000"; console.log(div.style.boxShadow); </script> </body> </html>
原址: https://juejin.im/post/5ab65f40f265da2384408a95
三. 画4条边的1像素, 可圆角
用::after
设置border:1px solid #000; 200%; height:200%
,然后再缩放scaleY(0.5);
优点可以实现圆角
,京东
就是这么实现的,缺点是按钮添加active
比较麻烦。
.div::after { content: ''; 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid #bfbfbf; border-radius: 4px; -webkit-transform: scale(0.5,0.5); transform: scale(0.5,0.5); -webkit-transform-origin: top left; }