使用纯CSS画出0.5px的细线

1,328 阅读1分钟

# 使用纯CSS画出0.5px的细线

在我们前端面试的时候有时候会被面试官问到请使用css画出0.5像素的细线

那么今天我给大家分享一下这道面试题 首先我们在html部分写一个div接着我们 接着我们给这个盒子的高为1px 然后使用CSS的transform进行缩放0.5倍 这样我们就会实现这个0.5px的细线 怎么样是不是很简单!

1.  <!DOCTYPE html>
1.  <html lang="en">
1.
1.  <head>
1.  <meta charset="UTF-8">
1.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
1.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
1.  <title>使用纯CSS画出0.5px的细线</title>
1.  </head>
1.
1.  <body>
1.  <div style="width: 100px; height: 1px; background-color: #000000; transform:scaleY(0.5);"></div>
1.  </body>
1.
1.  </html>

关注小宁 让你面试不迷路 我们下期再见!