《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是蓝；你看到好像多余的颜色设置是为了清除渐变过渡效果。