Page 56 - css揭秘

试一试 play.csssecrets.io/background-position-calc

„ CSS 背景与边框
http://w3.org/TR/css-backgrounds 相关规范
„ CSS 值与单位
http://w3.org/TR/css-values

4 边框内圆角

背景知识
box-shadow，outline， “多重边框”

难题

有时我们需要一个容器，只在内侧有圆角，而边框或描边的四个角在外
部仍然保持直角的形状，如图 2-15 所示。这是一个有趣的效果，目前还没
有被滥用。用两个元素可以实现这个效果，这并没有什么特别的：

<div class="something-meaningful"><div> HTML
I have a nice subtle inner rounding,
don't I look pretty?
</div></div>

.something-meaningful { 图 2-15
background: #655; 容器外围有一道边框，但只在内
padding: .8em;
} 侧有圆角

.something-meaningful > div {
background: tan;
border-radius: .8em;
padding: 1em;
}

4 边框内圆角 25

඀ࠡ JOEC