标签: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端看可能不太明显
标签:wrap content span ati nts for -o after otto
原文地址:http://www.cnblogs.com/javenlee/p/7264318.html