【CSS世界】01 border-radius深刻了解

如上圖所示，最近遇見有個需求，須要實現上圖效果。外面矩形好說，陰影部分犯了難了，不知爲什麼，我看到第一眼竟然是想用 canvas中的貝塞爾曲線畫出來。。。 最近在入門canvas。。

言歸正傳，其實這個效果能夠用純CSS來實現，就是本節的主角border-radius了。

1.border-radius的另外一種形式

咱們一般使用border-radius都是以下形式：

.style {
    border-radius: 5px;
}

這是一種簡寫形式，它是border-radius: 5px 5px 5px 5px/5px 5px 5px 5px的簡寫形式，就和padding還有margin是同樣的道理。

但也有區別，border-radius的四個值是從左上角開始，順時針環繞一圈，而padding和margin的四個值則是：上->右->下->左。另外，border-radius這種形式是一種比值形式。下面是一個例子：

<style>
    .circle {
      width: 200px;
      height: 400px;
      border: 2px solid #000;
      border-radius: 50px 50px 50px 50px/50px 100px 20px 0;
    }
</style>

<div class="circle"></div>

有了例子，基本上一目瞭然了，咱們能夠發現border-radius: 50px 50px 50px 50px/50px 100px 20px 0px其實能夠翻譯成：

border-radius: 左上角水平長度值 右上角水平長度值 右下角水平長度值 左下角水平長度值/左上角垂直長度值 右上角垂直長度值 右下角垂直長度值 左下角垂直長度值

2.使用border-radius實現前文需求

<style>
    .block {
    width: 300px;
    height: 200px;
    border-radius: 5px;
    display: flex;
    background-color: rgb(61, 148, 248);
  }

    .header {
    display: block;
    height: 40px;
    line-height: 30px;
    color: #fff;
    border-radius: 5px 0 0 0/5px 0 0 0;
    background-color: rgba(0, 0, 0);
  }
</style>

<div class="block">
        <span class="header">文字內容</span>
</div>

首先把該作的作了，把架子搭好。根據以上代碼，不出意外的話，實現的效果是這樣的⬇️。

接下來就根據本節中的第一小節的結論嘗試實現曲線效果。仔細觀察效果圖能夠發現圖中要進行處理的角其實只有兩個，分別爲左上角和右下角。

那麼如今將.header中的border-radius設置爲5px 0 X 0/5px 0 Y 0，其中的X和Y暫時表明未知。

再次觀察效果圖，能夠發現水平長度和垂直長度分別是這個span標籤的寬和高，可是因爲文字長度是不固定的，span標籤的寬其實也是不固定的，此時能夠設置x = 100%，那麼Y = 40px。如今來看一下效果⬇️。

莫慌，給span加個內邊距，控制一下最大寬度，而後調整一下背景的透明度。最終就能夠實現首圖的效果了，而且陰影部分是動態的，放代碼。。。

<style>
        .block {
      width: 300px;
      height: 200px;
      border-radius: 5px;
      display: flex;
      background-color: rgb(61, 148, 248);
    }

    .header {
      display: block;
      height: 40px;
      line-height: 30px;
      color: #fff;
      padding: 0 40px 0 10px;
      border-radius: 5px 0 100% 0/5px 0 40px 0;
      background-color: rgba(0, 0, 0, 0.1);/* 無論底色怎麼變，都是通透的 */
      max-width: 50%;/* 控制最大寬度 */
      overflow: hidden;/* 如下三個是控制超出部分省略 */
      text-overflow: ellipsis;
      white-space: nowrap;
    }
</style>

<div class="block center">
      <span class="header">文字內容</span>
</div>

3.border-radius的其餘特色

根據大佬的祕籍，border-radius還有兩個特色，分別是大值特性和等比例特性，在此就很少說了（實際上是夜深了。。。），可參考大佬的祕籍。

源碼在此

參考資料：

【1】秋月什麼時候了，CSS3 border-radius知多少？