> 原文出處：http://www.w3cplus.com/css3/css-secrets/inner-rounding.html ## 問題 有些時候，我們只希望容器的內部邊框是圓角的，但是外部輪廓線要是矩形的，如下圖所示：  *圖1注：一個具有輪廓線的容器，而它的圓角只在容器的內部* 目前，這個有趣的設計用得還不是很多。使用兩個元素實現這種效果就太平庸了： ~~~ <div class="something-meaningful"><div> I have a nice subtle inner rounding, don’t I look pretty? </div></div> .something-meaningful { background: #655; padding: .8em; } .something-meaningful > div { background: tan; border-radius: .8em; padding: 1em; } ~~~ 這么做的效果還不錯，但會強迫我們使用兩層標簽，而實際上我們只需要一層。那么是否有方法只使用一層就實現這種效果呢？ ## 解決方案 之前使用兩層標簽的解決方案很靈活，可以讓我們充分利用?`background`?的特性。比如，我們希望邊框不只是純色的，也有可能是帶有噪點的紋理，那么使用上面的方法很簡單就可以做到。不過，當我們的邊框只是純色時，有一種方法可以只使用一層元素實現相同的效果，下面就是代碼： ~~~ background: tan; border-radius: .8em; padding: 1em; box-shadow: 0 0 0 .6em #655; outline: .6em solid #655; ~~~ 你能猜到這段代碼的效果嗎？它所表現的效果:  *圖2注：為一個圓角元素添加輪廓線* 在這里我們將會充分利用?`outline`?不受元素的圓角影響，而元素的陰影受圓角影響的特性來完成這一效果。因此，如果我們將`outline`?置于圖層頂部，那么?`box-shadow`?就會彌補?`outline`?在角落上的空隙:  *圖3注：使用?`box-shadow`?屬性包圍圓角，并且不設置任何偏移和模糊效果* 所以組合使用它們就可以實現最終的效果。下圖中的陰影和?`outline`?被設置成了不同的顏色，這是為了讓大家看的更明白。  *圖4注：這里的輪廓線之所以使用黑色，陰影之所以使用洋紅色，是為了讓大家看清其中的原理；值得注意的是輪廓線在所有圖層的最上方* 注意，我們無需讓陰影的范圍等于?`outline`?的寬度，只需讓陰影足以覆蓋間隙即可。實際上，如果讓?`outline`?的寬度和陰影的范圍相同，在某些瀏覽器中會發生一些渲染問題，所以我建議使用比?`outline`?稍小一些的陰影。這也提出了新的問題：彌補間隙的最小陰影應該是多少？ 為了回答這個問題，我們需要使用學校里學到的勾股定理來計算直角三角形的各邊變長。勾股定理指出，最長邊等于其他兩邊的平方和，由此可知，如果這兩條邊都等于?`a`，那么最長邊就等于。 你可能會驚訝中學學到的理論竟然和我們的內部圓角效果相關，那么你可以查看一下圖:  *圖5注：如果邊框半徑是`r`，那么圓心到羅廓線邊角的最長距離就是，這意味著陰影最小的擴散范圍應該是。* 它很好地解釋了勾股定理是如何應用到這里的。在我們的這個示例中，`border-radius`?是?`.8em`，所以最小的陰影范圍是。在這里我們只需要將它約取為?`.34em`?的陰影范圍。為了避免重復計算，你可以直接取圓角半徑的一半，這樣就已經足夠用了。 請注意，這種計算方法并不是沒有限制的：對于這里要實現的效果，我們陰影半徑必須比?`outline`?的寬度要小，同時還要大于（這里的?`r`?表示?`border-radius`）。這意味著如果?`outline`?的寬度小于那么我們就無法實現實現這種效果了。