css3 移动端 1px 线变成0.5px

最新推荐文章于 2024-03-24 14:52:37 发布

weixin_30394333

最新推荐文章于 2024-03-24 14:52:37 发布

阅读量133

点赞数

原文链接：http://www.cnblogs.com/arealy/p/7771328.html

版权

.line1 {position:relative}
.line1:after {content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;border-bottom:1px solid #e0e0e0;-webkit-transform:scaleY(.5);transform:scaleY(.5);}

之前写的时候不太了解人家移动APP是怎么实现的，后来自己摸索知道了可以使用缩放的方式解决线比较粗的问题。

最近看到了小月博客里的一篇文章： http://www.aliyue.net/1487.html，因此，自己总结了一下。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-wap-web-app-capable" content="yes">
<meta name="apple-wap-web-app-status-bar-style" content="black-translucent">
<title>demo 0.5px的细线</title>
<style>
*{margin: 0;padding: 0}
/*一、使用渐变来做*/
/*注意：兼容性问题*/
.little-line1{ position:relative;}
.little-line1:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(0deg, transparent 50%, red 50%);
   /* background-image: -webkit-linear-gradient(0deg, transparent 50%, red 50%);
    background-image: -ms-linear-gradient(0deg, transparent 50%, red 50%);
    background-image: -o-linear-gradient(0deg, transparent 50%, red 50%); */
 }
 /*二、使用缩放来做*/
.little-line2{ position:relative;}
.little-line2:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: blue;
    /* 如果不用 background-color, 使用 border-top:1px solid blue; */
    -webkit-transform: scaleY(.5);
    transform:scaleY(.5);
 }
.lit-round{position:relative;width: 50px;height: 50px}
.lit-round:after {
    content: " ";
     position: absolute;
     left: 0;
     top: 0;
     z-index:-1;
     width: 200%;
     height:200%;
     border:1px solid blue;
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     -webkit-transform: scale(.5, .5);
     transform: scale(.5, .5);
 }
 /*三、weui的实现方式*/
 .weui-cell{position: relative;}
.weui-cell:before{ 
    content: " "; 
    position: absolute; 
    left: 0; top: 0; 
    right: 0; 
    height: 1px; 
    border-top: 1px solid #D9D9D9; 
    color: #D9D9D9; 
    -webkit-transform-origin: 0 0; 
    transform-origin: 0 0; 
    -webkit-transform: scaleY(0.5); 
    transform: scaleY(0.5); 
}
.btn-1 {
    width: 200px;
    height: 42px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    line-height: 42px;
    background-color: #EDEDED;
    border: 1px solid red;
}
.btn-little {
    position: relative;
    width: 200px;
    height: 42px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    line-height: 42px;
    background-color: #EDEDED;
}
.btn-little:before {
    content: '';
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border:1px solid red;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
</style>
</head>
<body>
<br><p>第一种方法</p><br>
<div class="little-line1"></div>
<br><p>第二种方法</p><br>
<div class="little-line2"></div>
<br>
<div class="lit-round">四周都是0.5px</div>

<br><p>第三种方法</p><br>
<div class="weui-cell"></div>
<br>
<p>0.5px 边框按钮</p>
<div class="btn-1">1px </div>
<br/><br/>
<div class="btn-little">0.5px</div>

</body>
</html>

转载于:https://www.cnblogs.com/arealy/p/7771328.html

weixin_30394333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 移动端 1px 线变成0.5px

.line1 {position:relative}.line1:after {content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;border-bottom:1px solid #e0e0e0;-webkit-transform:scaleY(.5);transform:scaleY(.5);}...
复制链接

扫一扫