CSS3的那些奇淫巧技（一）

时间 2019-11-07

标签 css3 css 那些栏目 CSS 繁體版

原文原文链接

前言

此系列主要和你们交流一下css平常开发或是拓展中的一些技巧，附上我的的一些理解与注意点（有些理解在代码层），欢迎指正~css

本文主要说一下如下5种效果： “毛玻璃、折角、切角、阴影、内圆角”。html

《毛玻璃》

示例图

小技巧

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

GIT源码，直通车github