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 背景渐变范围写法

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,657评论 0 7
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,335评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,803评论 0 2
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,619评论 0 6
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,712评论 1 45