CSS3的那些奇淫巧技（一）

前言

此係列主要和你們交流一下css平常開發或是拓展中的一些技巧，附上我的的一些理解與注意點（有些理解在代碼層），歡迎指正~

本文主要說一下如下5種效果： 「毛玻璃、折角、切角、陰影、內圓角」。

《毛玻璃》

示例圖

小技巧

1.filter與定位的位置關係
 2.blur高斯模糊
 3.模糊蒙版繼承父級容器寬高
複製代碼

代碼&理解

• css

  .pub-position{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin:  auto;
  }
    .glass-wrap{
        width: 325px;
        height: 185px;
        margin: 200px auto;
        background: url('../images/glass.jpg') no-repeat;
        background-size: contain;
        position: relative;
    }
    .word-wrap,.content{
        width: 200px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        overflow: hidden;
        color: #fff;
    }
      /* 這裏使用同級元素解決文字容器作濾鏡被覆蓋的問題 */
    .word-wrap::before{
        content: '';
        width: 325px;
        height: 185px;
        position: absolute;
        left: -10px; /* 這個值影響背景圖片的位置 */
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        filter: blur(10px);
        background: url('../images/glass.jpg') no-repeat -52.5px 0;
        background-size: contain;
    }
  複製代碼

• html

  <div class="glass-wrap">
    <div class="pub-position word-wrap"></div>
    <p class="pub-position content">模糊玻璃</p>
  </div>
  複製代碼

《切角》

示例圖

小技巧

1.linear-gradient 累加爲一層
 2.background-size 控制數量
 3.transparent 控制大小
複製代碼

代碼&理解

• css

  div{
    width: 200px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    margin: 100px auto;
    color: #fff
  }
  /*
    知識點：
    linear-gradient 每加一個爲累加一層
    
    background-size: 
    單角一層不用
    雙角 50% 100%; 
    三角 50% 50%; （切角寬度 transparent 0）
    全角 50% 50%;
  */
  .corner-cut1{
    background: rgb(201, 125, 26); /*compatibility*/
    background: linear-gradient(-45deg, transparent 15px, rgb(201, 125, 26) 0);
  }
  .corner-cut-all{
    background: rgb(201, 125, 26); /*compatibility*/
    background:
    linear-gradient(135deg, transparent 15px, rgb(201, 125, 26) 0) top left,
    linear-gradient(225deg, transparent 15px, rgb(201, 125, 26) 0) top right,
    linear-gradient(45deg, transparent 15px, rgb(201, 125, 26) 0) bottom left,
    linear-gradient(-45deg, transparent 15px, rgb(201, 125, 26) 0) bottom right;
    /* transparent 15px 越大切角越大 */
    /* 四切角 關係爲90deg */
    /* 切角讀書以上下邊爲起點 默認90deg */
    background-size: 50% 50%; /* 類設置圖片尺寸 使每一漸變層只佔元素的1/2 從而不覆蓋transparent的角度 */
    background-repeat: no-repeat;
  }
  複製代碼

• html

  <div class="corner-cut1">切角</div>
  <div class="corner-cut-all">全切角</div>
  複製代碼

《折角》

示例圖

小技巧

1.切角軸爲45°切（正切）
 2.第一層折角效果 「/」的使用以及 size的計算（關聯①計算）
複製代碼

代碼&理解

• css

  div{
    width: 200px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    margin: 100px auto;
    color: #fff
  }
  .corner-cut1{
    background: #58a; /* 優雅降級 */
    background:
    linear-gradient(-135deg, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 30px 30px,
    linear-gradient(-135deg, transparent 20px, #58a 0);
  }
  複製代碼

• html

  <div class="corner-cut1">折角</div>
  複製代碼

《陰影》

示例圖

小技巧

1. box-shadow 疊加
複製代碼

代碼&理解

• css

  div{
    width: 200px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    background: rgb(201, 125, 26);
    margin: 100px auto;
    color: #fff
  }
  .shadow-bottom{
    box-shadow: 0 5px 5px rgb(124, 74, 8)
  }
  .shadow-slide {
    box-shadow: 5px 0 5px rgb(124, 74, 8), -5px 0 5px rgb(124, 74, 8)
  }
  .shadow-right-top{
    box-shadow: 0 -5px 5px rgb(124, 74, 8),5px 0 5px rgb(124, 74, 8)
  }
  複製代碼

• html

  <div class="shadow-bottom">單邊陰影</div>
  <div class="shadow-slide">左右陰影</div>
  <div class="shadow-right-top">右上角陰影</div>
  複製代碼

《內圓角》

示例圖

小技巧

1. outline 描邊特性
複製代碼

代碼&理解

• css

  .wrap{
        background: #d3941e;
        border-radius: 8px;
        width: 200px;
        height: 80px;
        margin: 100px auto;
        box-shadow: 0 0 0 8px #754906;
        outline: 8px solid #754906
    }
    .wrap-special{
        outline: 6px solid #754906
    }
  複製代碼

• html

  <div class="wrap"></div>
  <div class="wrap wrap-special"></div>
  複製代碼

結語：

不按期更新，由於是一些技巧類，因此本文比較直接，沒有一步步分析，歡迎指正交流，感謝支持~

GIT源碼，直通車