一、使用两个元素实现
html
<div class="parent">
<div class="inset-radius">时代峰峻胜利大街分类考试等级分类考试等级分类考试大家反馈来的时地方高度分工的发给对方间范德萨</div>
</div>
css
.parent{
width: 200px;
padding: 20px;
background: #655;
}
.inset-radius{
border-radius: 20px;
background: tan;
}
效果图
二、使用box-shadow+outline实现
html
<div class="multiple"></div>
css
.multiple{
width: 250px;
height: 150px;
margin: 50px;
background: tan;
border-radius: 15px;
box-shadow: 0 0 0 10px #655;
outline: 10px solid #655;
}
效果图
说明：
描边outline不会跟着元素的圆角走，因而会显示直角，但是box-shadow会跟着元素的圆角走，因此两者叠加起来刚好填补描边和容器圆角之间的空隙，这两者结合达到了我们想要的效果。outline的第一个参数一定要大于等于box-shadow的第四个参数 。