css border 三角形陰影(不規則圖形陰影) & 多重邊框的製做

前言：這是筆者學習以後本身的理解與整理。若是有錯誤或者疑問的地方，請你們指正，我會持續更新！

border 的組合寫法

　　border：border-width border-style border-color;

• border-width：邊框寬度，不能爲百分比，由於不會根據設備寬度改變；同理，outline | text-shadow | box-shadow 也不能夠；
• border-style：邊框樣式，通常用 solid 多一點，dashed（虛線）、dotted（點狀線）也有；
• border-color：邊框顏色，默認顏色是元素的文本顏色，若是沒有設置，那就從父元素繼承文本顏色；

　　邊框能夠根據方向單獨設置，上下左右，border-top | border-bottom | border-left | border-right ;

　　因此屬性也能夠單獨設置，border-top-width | border-top-style | border-top-color ;

　　單屬性也能夠有組合寫法：

• border-width:上   右   下   左；（順時針方向）
• border-width:上   左右   下；
• border-width:上下   左右 ；
• border-width:四個方向；
• border-style | border-color也能夠這樣設置；

　　還能夠根據方向來用組合寫法：

• border-left : 邊框寬度 邊框樣式 邊框顏色；

用 border 作圖形

　　邊框的交界處是斜線，大師們用這個特性作出了三角形，配合其餘屬性，能夠作出各類圖形；

　　原理就是：控制四個方向的邊框顏色，就能夠作出三角形。再控制寬度，就能夠作出各類不一樣的鈍角、銳角三角形；

    .triangle {
      border-style: solid;
      border-width: 30px 50px 60px 80px;
      /*咱們能夠控制各方向邊框的寬度，作出各類不一樣的三角形*/
      border-color: #f00 #0f0 #00f #0ff;
      /*四個方向的顏色自由設置，當設置其餘三個方向或兩個方向的顏色爲transparent(透明色)時，另外一方向就成了一個三角形*/
      width: 0;
      /*盒子寬度爲0，四個方向的border寬度一致，能夠用border作正方形*/
      margin: 100px;
    }

 

　　我比較喜歡根據方向來寫三角形，這樣容易理解：

　　

    .triangle {
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #0ff;
      /*咱們通常根據方向來寫三角形，這樣容易記憶；箭頭指向的反方向的顏色設置爲你想要的，而後箭頭方向不要寫，另外兩個方向的顏色設置爲transperent透明*/
    }

 

小三角的陰影

　　三角形作出來了，可是當咱們給元素定義一個 box-shadow，會出現以下狀況：

　　若是不想要陰影，很好解決，刪掉三角形的 box-shadow 就行了；

　　而在實際應用中，咱們不少狀況下是須要陰影的，只是陰影出如今三角形的兩條邊上，下圖給容器設置了陰影；

　　

方法一：

　　咱們能夠在加一個元素，也寫成三角形，設置層級比箭頭和容器元素都小，而且設置濾鏡，位置比箭頭稍高，露出邊緣部分就能夠了；

　　當咱們把以前的箭頭刪掉，就是如右圖：

　　

　　完成品：

　　

　　PS：濾鏡也有兼容性問題，建議用谷歌瀏覽器測試；

  <style type="text/css">
    .note {
      margin: 100px;
      width: 200px;
      height: 80px;
      background: #f60;
      position: relative;
      border-radius: 5px;
      box-shadow: 0 0 10px 0px #000;
      /*水平偏移---垂直偏移---模糊度---擴張半徑---顏色*/
    }

    .triangle {
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #f60;
      /*咱們通常根據方向來寫三角形，這樣容易記憶；箭頭指向的反方向的顏色設置爲你想要的，而後箭頭方向不要寫，另外兩個方向的顏色設置爲transperent透明*/
      position: absolute;
      top: -10px;
      left: 50%;
      margin-left: -10px;
    }

    .filter {
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #000;
      position: absolute;
      top: -10px;
      left: 50%;
      margin-left: -10px;
      z-index: -1;
      filter: blur(2px);
      /*這又設計到濾鏡的知識*/
    }
  </style>
  <div class="wrapper">
    <div class="note">
      <span class="triangle"></span>
      <span class="filter"></span>
    </div>
  </div>

 

方法二：

　　仍是 filter，可是設置 drop-shadow；

　　drop-shadow 不支持內陰影，可是支持不規則圖形的陰影。

　　

  <style type="text/css">
    .note {
      margin: 100px;
      width: 200px;
      height: 80px;
      background: #f60;
      position: relative;
      border-radius: 5px;
      /*box-shadow: 0 0 10px 0px #000;*/
      /*水平偏移---垂直偏移---模糊度---擴張半徑---顏色*/

      filter: drop-shadow(0 0 6px #000);
      /*看清楚哦，drop-shadow沒有擴張半徑*/
    }

    .triangle {
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #f60;
      /*咱們通常根據方向來寫三角形，這樣容易記憶；箭頭指向的反方向的顏色設置爲你想要的，而後箭頭方向不要寫，另外兩個方向的顏色設置爲transperent透明*/
      position: absolute;
      top: -10px;
      left: 50%;
      margin-left: -10px;
    }
  </style>
  <div class="wrapper">
    <div class="note">
      <span class="triangle"></span>
    </div>
  </div>

 

小三角的邊框

　　三角形陰影問題解決方法如上。

　　同理，三角形的邊框也能夠這樣寫：寫個三角形，沉在箭頭下邊，顏色設置成邊框顏色，位置比箭頭稍高一些（容器邊框寬度值），就能夠了；

　　接下來我使用 :after 和 :before 寫的三角形和邊框，同理上面的陰影也能夠這樣；

  <style type="text/css">
    .note {
      margin: 100px;
      width: 200px;
      height: 80px;
      background: #f0f;
      position: relative;
      border-radius: 5px;
      border: 1px solid #000;
    }

    .note:after {
      content: "";
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #f0f;
      /*咱們通常根據方向來寫三角形，這樣容易記憶；箭頭指向的反方向的顏色設置爲你想要的，而後箭頭方向不要寫，另外兩個方向的顏色設置爲transperent透明*/
      position: absolute;
      top: -10px;
      left: 50%;
      margin-left: -10px;
    }

    .note:before {
      content: "";
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #000;
      position: absolute;
      top: -11px;
      /*寫個三角形，沉在箭頭下邊，顏色設置成邊框顏色，位置比箭頭稍高一些（容器邊框寬度值），就能夠了*/
      left: 50%;
      margin-left: -10px;
      z-index: -1;
    }
  </style>
  <div class="wrapper">
    <div class="note"></div>
  </div>

 

border-radius 圓角

　　css3 屬性 border-radius，「邊框半徑」，值能夠用 px、em、pt、百分比等。

　　border-radius 支持四個角使用不一樣弧度，方向依次是左上--右上--右下--左下（是從左上開始，順時針）。

　　border-radius 還能夠單獨對每一個角設置：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius  
• border-bottom-left-radius

　　單獨設置能夠寫兩個值，第一個值是水平半徑，第二個值是垂直半徑；若是隻有一個值，那麼水平和垂直相等。

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    .test {
      width: 200px;
      height: 80px;
      margin: 100px;
      background: #f0f;
      border-radius: 15px 20px 35px 50px / 10% 25% 1em 50%;
      /*水平-----/-----垂直，中間用「/」隔開*/
      /*左上水平   右上水平   右下水平   左下水平  /  左上垂直   右上垂直   右下垂直   左下垂直*/
      /*這種方法不推薦使用，太亂了，傻傻分不清楚*/
    }
  </style>
  <div class="test"></div>

　　固然，這個屬性咱們用的最多的就是畫圓形，把值設成寬度的一半及以上（50%及以上）。

多重邊框

outline 製做多重邊框

　　有的需求是邊框外面還有邊框，咱們能夠用 outline 來寫，有一個相關的屬性 outline-offset，能夠控制描邊與邊緣的位置關係，能夠設置成負值；

　　outline 製做多重邊框，最多隻能兩層，並且不能是弧形的；

    .test {
      margin: 100px;
      width: 200px;
      height: 80px;
      border: 10px solid #f0f;
      outline: 15px solid #f90;
      outline-offset: -25px;
    }

 

box-shadow 製做多重邊框

　　box-shadow 能夠作不少層（多了會很卡，電腦性能問題），並且配合 border-radius 屬性能夠作出弧形；

　　box-shadow 是不佔據空間的，因此沒法響應事件，咱們能夠利用 inset 設置成內陰影，在擴大空間就行了；

    .test {
      margin: 100px;
      width: 200px;
      height: 80px;
      border: 10px solid #f0f;
      border-radius: 25% 30% 50% 29%;
      box-shadow: 0 0 0 10px #0f0, 0 0 0 20px #ff0, 0 0 0 10px #0ff inset;
      /*水平偏移---垂直偏移---擴張半徑---模糊度---顏色*/
      /*能夠寫多個陰影，用逗號隔開*/
      /*inset是內陰影*/
      /*因爲box-shadow屬性並不佔據空間，因此是沒法響應事件的，咱們能夠利用inset內陰影，再用padding擴充空間就行了*/
    }