CSS 如何在屏幕上显示出零点几像素

面试中提及 CSS 方面的问题时，经常会问到如何设置小数级别像素。

如：现需要设置一个元素的高度为 0.5px，如何实现？
没做过此类题目的人，通常会陷入如何让 height=0.5px 这样的思考中，或许题目改为：“如何在屏幕上显示出 0.5px 像素？”。 会让人更有思路。

• 用 scale() 进行缩放

设置元素高度为 1px ，并在垂直方向上缩小50%。

{
  height: 1px; 
  transform: scale(1, 0.5);
}

transform: scale(x,y); 定义在水平方向上缩放 x 倍，在垂直方向上缩放 y 倍。

.

• 用 background 渐变实现
  设置元素高度为 1px，从顶部到高度 50% 处，背景色为红色，从高度 50% 开始到底部，背景色为透明。

{
    height: 1px;
    background: linear-gradient(red 0%, red 50%, transparent 50%); 
    /* 注意标准的语法（必须放在最后） */
}

.

---

【1】css3 背景渐变用法
【2】css3 背景渐变范围写法