CSS3的那些奇淫巧技（一）

依舊優雅發表於2019-10-29
CSSS3

前言

此係列主要和大家交流一下css日常開發或是擴充中的一些技巧，附上個人的一些理解與注意點（有些理解在程式碼層），歡迎指正~

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

《毛玻璃》

示例圖

CSS3的那些奇淫巧技（一）

小技巧

 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>
複製程式碼

《切角》

示例圖

CSS3的那些奇淫巧技（一）

小技巧

 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>
複製程式碼

《折角》

示例圖

CSS3的那些奇淫巧技（一）

小技巧

 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>
複製程式碼

《陰影》

示例圖

CSS3的那些奇淫巧技（一）

小技巧

 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>
複製程式碼

《內圓角》

示例圖

CSS3的那些奇淫巧技（一）

小技巧

 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原始碼，直通車

相關文章