技巧4：邊框圓角

前面的話

邊框圓角這個技巧利用的知識是前面提到過的屬性：box-shadow與outline。

有時我們需要一個容器，只在內側有圓角，而邊框或描邊的四個角在外部仍然保持直角的形狀。

用兩個元素實現這個效果，沒什麼特別的：

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

    .something {
        max-width: 10em;
        background: #655;
        padding: .8em;
    }
    .something > div {
        max-width: 10em;
        background: tan;
        border-radius:.8em;
        padding: 1em;
    }

一個元素如何實現？

如果只用一個元素如何達到同樣的效果呢？

使用outline屬性來實現，outline描邊不會跟着元素的圓角走，但box-shadow會跟着圓角走：

單獨使用box-shadow

      <div>
        I have a nice  subtle inner rounding,don't I look pretty?
    </div>
    
     div {
        max-width: 10em;
        background: tan;
        border-radius: .8em;
        box-shadow: 0 0 0 .6em #655;
    }

無法實現這個效果。

單獨使用outline

      <div>
        I have a nice  subtle inner rounding,don't I look pretty?
    </div>
    
     div {
        max-width: 10em;
        background: tan;
        border-radius: .8em;
        outline: .6em solid #655;
    }

效果實現。

填充空隙

如果想填充白色的空隙部分怎麼辦呢？

同時使用box-shadow與outline屬性：

  <div>
        I have a nice  subtle inner rounding,don't I look pretty?
    </div>
    
      div {
        max-width: 10em;
        background: tan;
        border-radius: .8em;
        box-shadow: 0 0 0 .5em pink;
        outline: .6em solid #655;
    }

注意: box-shadow擴張的陰影爲多大時可以填補這些空隙呢？只有擴張半徑小於描邊的寬度值，但同時又要比(√2 - 1)r大，r表示border-radius;如果描邊的寬度比(√2 - 1)r小，那我們是無法用這個方法實現該效果的。