CSS3如何实现0.5边框

Jason 发布于2019-08-01 16:55 / 2577人阅读

摘要：在移动端有时的边框会显得很粗不美观，淘宝京东的触屏均是采用浅细的线条来显示在移动设备上。

在移动端有时1px的边框会显得很粗不美观，淘宝、京东的触屏均是采用浅细的线条来显示在移动设备上。具体实现方法如下：

普通的1px黑色实线边框：

border: 1px solid #000;

半像素边框当然不是简单地把1px改为0.5px（会被解析成1px），border-width的值只能是自然数

类似的，outline, box-shadow等等也没有办法画出0.5px的细线

常规思路是不可行的，我们可以用伪元素 + 缩放巧妙地实现，具体步骤如下：

设置目标元素作为定位参照

.thinner-border {
    position: relative; /* 只要不是默认值static即可 */
}

给目标元素添加一个伪元素before或者after，并设置绝对定位

.thinner-border:before {
    content: "";
    position: absolute;
}

给伪元素添上1px的边框

border: 1px solid red;

设置伪元素的宽高为目标元素的2倍

width: 200%;
height: 200%;

缩小0.5倍（变回目标元素的大小）

transform-origin: 0 0;
transform: scale(0.5, 0.5);

把border包进来

box-sizing: border-box;

简言之就是先放大再缩回来，border-box是关键，否则边框不会一起缩放

二.具体实现

上面已经分步骤写得很清楚了，拼在一起就是完整实现：

.thinner-border {
    position: relative;
}

.thinner-border:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

功能是给class值指定了thinner-border的block和inline-block元素添上半像素的边框，因为inline元素的width和height有一些限制，伪元素获取到的200%要比实际值小，边框的宽高也会比期望的小。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50832.html

CSS3如何实现0.5边框

摘要：在移动端有时的边框会显得很粗不美观，淘宝京东的触屏均是采用浅细的线条来显示在移动设备上。在移动端有时1px的边框会显得很粗不美观，淘宝、京东的触屏均是采用浅细的线条来显示在移动设备上。具体实现方法如下：普通的1px黑色实线边框： border: 1px solid #000; 半像素边框当然不是简单地把1px改为0.5px（会被解析成1px），border-width的值只能是自...

fobnn 2019-08-29 12:42 评论0 收藏0
CSS3 新特性

摘要：语法说明对象选择器投影方式轴偏移量轴偏移量模糊半径阴影扩展半径阴影颜色内阴影，向右偏移，向下偏移，模糊半径，阴影缩小属性的参数设置取值阴影类型此参数可选。 CSS3 是最新的 CSS 标准，并且完全向后兼容，不过目前W3C 仍然在对 CSS3 规范进行开发，虽然标准的规范还没有正式发布，但是现代浏览器已经支持相当多的 CSS3 属性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

justjavac 2019-08-29 13:07 评论0 收藏0
CSS背景与边框

摘要：背景与边框半透明边框背景知识颜色在里我们可以使用和两种色彩模式，二者均可以用来在设置颜色的同时指定其它透明度。解决方案需要知道的是，在默认情况下，背景会延伸到边框所在区域的下层。 title: 背景与边框 date: 2016-10-16 tags: CSS Secrets 0x00 半透明边框背景知识 RGBA/HSLA 颜色在CSS3里我们可以使用RGBA和...

wanghui 2019-08-30 13:15 评论0 收藏0
【前端Talkking】CSS系列-css3之box-shadow介绍

摘要：基本上就是将单侧投影中的技巧运用两次，以如下所示在浏览器中的效果如下模拟边框使用属性可以模拟的效果，以如下所示在浏览器中的效果如下我们可以看到利用属性模拟了的效果，但是与不同的是，使用创建的边框效果并不会影响元素的尺寸。 1.写在前面在CSS3中，可以使用box-shadow属性来创建阴影效果来给二维平面增加深度效果，这个属性在前端开发中使用的非常多，例如segmentfault的首...

jackzou 2019-08-29 14:20 评论0 收藏0