利用CSS3制作0.5px的细线

最新推荐文章于 2024-03-01 09:13:28 发布

cicheng1407

最新推荐文章于 2024-03-01 09:13:28 发布

阅读量708

点赞数

文章标签：前端移动开发 ViewUI

原文链接：https://my.oschina.net/dh20/blog/1631964

版权

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

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;
}

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

对比图

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

转载于:https://my.oschina.net/dh20/blog/1631964

cicheng1407

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用CSS3制作0.5px的细线

在移动端，有时需要制作一条细线；我们就会不由自主的想到样式： height: 1px; /*或者*/ border-top: 1px solid #CCC; 很简单，满足了需求。然而，在移动设备上1px的细线看起来好像还是很粗，不是那么的精致，体验不是很好。那么，样式写成： height...
复制链接

扫一扫