利用CSS3制作0.5px的细线

原创
2018/03/08 23:42
阅读数 98

在移动端,有时需要制作一条细线;我们就会不由自主的想到样式:

height: 1px; /*或者*/ border-top: 1px solid #CCC;

很简单,满足了需求。然而,在移动设备上1px的细线看起来好像还是很粗,不是那么的精致,体验不是很好。那么,样式写成:

height: 0.5px; /*或者*/ border-top: 0.5px solid #CCC;

是不是看起来会比较好呢?

这个时候,IOS系统的Safari浏览器表现是满足我们预期的,因为Safari浏览器是支持浮点属性;而在Android系统中,事情就变得很麻烦了,因为Android会对浮点型数据进行四舍五入,即height: 0.5px和height: 1px变现并没有什么差别。这时就需要一些特殊的方法来处理0.5px的细线。

这里做个对比,网页代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="full-screen" content="yes" />
<meta name="x5-fullscreen" content="true" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title></title>
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
    text-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.a {
    margin-top: 20px;
    border-bottom: 1px solid #F00;
}
 
.b {
    margin-top: 20px;
    border-bottom: 0.5px solid #F00;
}
</style>
</head>

<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>

截屏对比:

对比图

方法一:利用缩放

HTML代码:

<div class="demo_1"></div>

CSS代码:

.demo_1 {
    position: relative;
}

.demo_1::before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #F00;
    /*如果不使用background-color,也可以使用border-top: 1px solid #F00;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    right: 0px;
    bottom: 0px;
    left: 0px;
    -webkit-transform: scaleY(0.5);
    -moz-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

注:如果需要四个边框都是0.5px,也可以利用缩放的方法:

CSS代码:

.demo_2 {
    position: relative;
}

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

方法二、利用渐变

原理:设置高度为1px,然后背景使用渐变,0—50%为透明色,50%—100%为纯色,即可实现0.5px细线效果。

HTML代码:

<div class="demo_3"></div>

CSS代码:

.demo_3 {
    position: relative;
}

.demo_3::before {
    content: "";
    width: 100%;
    height: 1px;
    background-image: -webkit-linear-gradient(bottom, transparent 0,transparent 50%,#F00 50%, #F00 100%);
    background-image: -moz-linear-gradient(bottom, transparent 0,transparent 50%,#F00 50%, #F00 100%);
    background-image: linear-gradient(bottom, transparent 0,transparent 50%,#F00 50%, #F00 100%);
    display: block;
    position: absolute;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

方法三、利用图片

原理:

  • 制作高度为2px,宽度为1px的图片,一半是透明的,一半纯色,并保存图片为png格式;
  • 设置元素的background和background-size两个属性来实现。

HTML代码:

<div class="demo_4"></div>

CSS代码:

.demo_4 {
    position: relative;
}

.demo_4::before {
    content: "";
    width: 100%;
    height: 1px;
    background: url("/images/demo_4_1px.png") repeat-x 0 0 transparent;
    background-size: 1px 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

方法四:利用阴影

原理:直接设置元素box-shadow属性阴影大小(spread)为0.5px获得四个边框效果、或者垂直阴影(v-shadow)为0.5px获得单边效果。

注:Android的QQ浏览器有效果,IOS的Safari浏览器没有效果。

CSS代码:

.demo_5 {
    height: 20px;
    margin-top: 20px;
    -webkit-box-shadow: 0px 0.5px 0px 0px #F00 inset;
    -moz-box-shadow: 0px 0.5px 0px 0px #F00 inset;
    box-shadow: 0px 0.5px 0px 0px #F00 inset;
}

.demo_6 {
    height: 20px;
    margin-top: 20px;
    -webkit-box-shadow: 0px 0px 0px 0.5px #F00 inset;
    -moz-box-shadow: 0px 0px 0px 0.5px #F00 inset;
    box-shadow: 0px 0px 0px 0.5px #F00 inset;
}

以下是几种方法的对比图:

对比图

抱歉,两张对比图放到网页上之后看得不够清晰。

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部