难题
需要一个容器只在内侧有圆角,但边框或描边的四个角在外部仍保持直角的形状。
使用两个元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框内圆角</title>
<style type="text/css" media="screen">
.mybox{
background: #655;
padding: .8em;
}
.mybox > div{
background: tan;
border-radius: .8em;
padding: 1em;
}
</style>
</head>
<body>
<div class="mybox">
<div>
得不到的无所谓
</div>
</div>
</body>
</html>
使用一个元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框内圆角</title>
<style type="text/css" media="screen">
.mybox{
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;
}
</style>
</head>
<body>
<div class="mybox">
得不到的无所谓
</div>
</body>
</html>