CSS3的那些奇淫巧技(一)

3,747 阅读3分钟

前言

此系列主要和大家交流一下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源码,直通车