html css边框圆角,css边框内圆角实现的2种方法

边框内圆角

在学习多重边框的时候我们用到了两个属性box-shandow和outline，outline 描边并不会跟着元素的圆角走，但是box-shandow 是会的。因此我们利用两者的结合便可实现下图的效果

1、思路如下：为元素设置圆角，外层设置轮廓outline。圆角与直角之间的空隙用阴影补齐，阴影的尺寸为圆角半径的一半html>

.uu{

margin: 100px;

width: 200px;

height: 70px;

border-radius:10px;

background: tan;

outline:10px solid #655;

box-shadow:0 0 0 5px #655;

}

2、使用伪元素实现边框内圆角html>

.uu{

margin: 100px;

position: relative;

height: 200px;

width: 400px;

text-align: center;

line-height: 200px;

background: #FFF;

border-radius: 30px;

}

.uu::before {

content: '';

position: absolute;

top: -15px; right: -15px; bottom: -15px; left: -15px;

background: #B387DD;

z-index: -1;

}