码迷,mamicode.com
首页 > 移动开发 > 详细

用伪元素写移动端1px边框时想实现边角效果

时间:2017-07-31 17:52:42      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:wrap   content   span   ati   nts   for   -o   after   otto   

做移动端页面时,又想用伪元素做真实1像素边框,又想有边角时,会发现只加一个border-radius时出来的效果边款并没有变成圆角,解决办法是加两个border-radius

<div class="white_wrap border b_all">
</div>
.white_wrap{margin:1.5rem 1.5rem 0 1.5rem;background-color:#fff;border-radius:6px;}
.border{ position:relative;}
.border:after{ content:""; position:absolute; left:0; top:0; right:-100%; bottom:-100%; -webkit-transform:scale(0.5);
 -webkit-transform-origin:0 0; pointer-events:none;}
.b_all:after{ border:1px solid #e3e4e5;border-radius: 12px;} //注意伪元素的圆角设成2倍

 

技术分享

图中边框用了真实1px,在pc端看可能不太明显

 

 

用伪元素写移动端1px边框时想实现边角效果

标签:wrap   content   span   ati   nts   for   -o   after   otto   

原文地址:http://www.cnblogs.com/javenlee/p/7264318.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!