如下图所示边框内圆角：
这种其实也不难实现：可以使用两个便签，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.something-meaningful {
background: #655;
padding: 0.8em;
}
.something-meaningful >div {
background: tan;
padding: 1em;
border-radius: 0.8em;
}
</style>
</head>
<body>
<div class="something-meaningful">
<div>I have a nice subtle inner rounding,don't I look pretty?</div>
</div>
</body>
</html>但是如何使用单标签的形式实现呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.something-meaningful {
background: tan;
padding: 1em;
border-radius: .8em;
outline: 0.8em solid #655;
box-shadow: 0 0 0 .6em #655;/*这里的扩展半径要小于outline的值*/
}
</style>
</head>
<body>
<div class="something-meaningful">I have a nice subtle inner rounding,don't I look pretty?</div>
</body>
</html>