《CSS揭祕》總結二：css經常使用背景樣式實現

《CSS揭祕》總結二：css經常使用樣式實現

裁縫效果

實現思路：使用outline屬性，將定義的虛線outline，經過outline-offset往內偏移

<div class="parent">
    裁縫
  </div>
  
 .parent {
    background: #324057;
    width: 400px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    color: white;
    font-size: 2rem;
    margin: 100px;
    border-radius: 20px;
    outline: 2px dashed currentColor;
    outline-offset: -20px;
  }
複製代碼

outline的特色：

• 不貼合border-radio，始終保持直角（被認爲是bug，可能將來會修改爲貼合）
• 多邊框場景不適用

外直內彎

實現思路：使用outline搭配box-shadow

<div class="normal parent2">
      外直裏彎
    </div>
.parent2 {
    border-radius: 20px;
    background: #ff9b00;
    outline: 20px solid ;
    box-shadow: 0 0 0 20px red;
  }
複製代碼

最外層是outline，紅色的是box-showdow;只要把boxshowdow改爲跟outline同樣的顏色就能夠了。 至於box-show的寬度多少最合適呢？這個是能夠經過勾股定理算出來的。

也就是（r根號2）的寬度

斜條紋背景

知識點：background:linear-gradient(direction, color...);

橫豎條紋都很是簡單：

.parent3 {
    background: linear-gradient(to right,cornflowerblue 50%,orange 0);
    background-size: 30px 100%;
  }
複製代碼

思路：首先定義了通常是藍，一半是橙；可是size肯定義了30px；也就是15px藍，15px橙；再加上默認的repeat；那麼就造成了重複條紋了。

斜條紋（有點麻煩）：

background: linear-gradient(45deg,orange 25%, cornflowerblue 25%, cornflowerblue 50%,orange 50%,orange 75%, cornflowerblue 75%,cornflowerblue 0);
    background-size: 60px 60px;
複製代碼

若是沒有repeat，他長得樣子就像下面這樣，由4個條紋組成。

原理：好像鋪地磚同樣，這樣的條紋板磚拼到一塊兒就是一個連貫條紋的效果。 可是這種方式很是蛋疼，應爲你稍微改動下角度的話，這個效果就被破壞了。怎麼辦？難道又專門爲了一個角度去計算這一個小格子的樣式嗎？顯然很麻煩。

接下來用到一個威猛的線性效果，repeat-linear-gradient；是的前面多了個repeat這個單詞；

.parent5 {
    background: repeating-linear-gradient(45deg, orange , orange 15px ,cornflowerblue 15px, cornflowerblue 30px);
  }
複製代碼

上面代碼的意思是：0-15px是橙，15-30px是藍；你看到好像多餘的顏色設置是爲了清除漸變過渡效果。