內(nèi)凹圓角

原文出處：http://www.w3cplus.com/css3/css-secrets/inner-rounding.html

問題

有些時候，我們只希望容器的內(nèi)部邊框是圓角的，但是外部輪廓線要是矩形的，如下圖所示：

圖1注：一個具有輪廓線的容器，而它的圓角只在容器的內(nèi)部

目前，這個有趣的設計用得還不是很多。使用兩個元素實現(xiàn)這種效果就太平庸了：

<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;
}

這么做的效果還不錯，但會強迫我們使用兩層標簽，而實際上我們只需要一層。那么是否有方法只使用一層就實現(xiàn)這種效果呢？

解決方案

之前使用兩層標簽的解決方案很靈活，可以讓我們充分利用?background?的特性。比如，我們希望邊框不只是純色的，也有可能是帶有噪點的紋理，那么使用上面的方法很簡單就可以做到。不過，當我們的邊框只是純色時，有一種方法可以只使用一層元素實現(xiàn)相同的效果，下面就是代碼：

background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;

你能猜到這段代碼的效果嗎？它所表現(xiàn)的效果:

圖2注：為一個圓角元素添加輪廓線

在這里我們將會充分利用?outline?不受元素的圓角影響，而元素的陰影受圓角影響的特性來完成這一效果。因此，如果我們將outline?置于圖層頂部，那么?box-shadow?就會彌補?outline?在角落上的空隙:

圖3注：使用?box-shadow?屬性包圍圓角，并且不設置任何偏移和模糊效果

所以組合使用它們就可以實現(xiàn)最終的效果。下圖中的陰影和?outline?被設置成了不同的顏色，這是為了讓大家看的更明白。

圖4注：這里的輪廓線之所以使用黑色，陰影之所以使用洋紅色，是為了讓大家看清其中的原理；值得注意的是輪廓線在所有圖層的最上方

注意，我們無需讓陰影的范圍等于?outline?的寬度，只需讓陰影足以覆蓋間隙即可。實際上，如果讓?outline?的寬度和陰影的范圍相同，在某些瀏覽器中會發(fā)生一些渲染問題，所以我建議使用比?outline?稍小一些的陰影。這也提出了新的問題：彌補間隙的最小陰影應該是多少？

為了回答這個問題，我們需要使用學校里學到的勾股定理來計算直角三角形的各邊變長。勾股定理指出，最長邊等于其他兩邊的平方和，由此可知，如果這兩條邊都等于?a，那么最長邊就等于。

你可能會驚訝中學學到的理論竟然和我們的內(nèi)部圓角效果相關，那么你可以查看一下圖:

圖5注：如果邊框半徑是r，那么圓心到羅廓線邊角的最長距離就是。

它很好地解釋了勾股定理是如何應用到這里的。在我們的這個示例中，border-radius?是?.8em，所以最小的陰影范圍是。

請注意，這種計算方法并不是沒有限制的：對于這里要實現(xiàn)的效果，我們陰影半徑必須比?outline?的寬度要小，同時還要大于那么我們就無法實現(xiàn)實現(xiàn)這種效果了。