网页前端知识汇总（九）—— HTML+CSS巧用before和:after伪元素画立体圆环

网页前端知识汇总（九）—— HTML+CSS巧用before和:after伪元素画立体圆环，CSS标签属性里面“伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。

他们有什么作用呢，下面我写个实例你看下

一般看到这个图是不是您想到的直接用图片替代？其实这个用伪元素是可以解决的，只需要一个div如这样

<div class="xycms_wap"></div>

 然后你给与CSS属性，用伪元素去修饰其样式，主要是边框阴影效果，看下具体代码

.xycms_wap {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  margin: 55px auto;
  background: inherit;
  font-size: 150px;
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3), inset 15px 15px 2px rgba(0, 0, 0, 0.1);
}

.xycms_wap:after,
.xycms_wap:before {
  content: "";
  position: absolute;
  border-radius: inherit;
}

.xycms_wap:before {
  left: -15px;
  right: -15px;
  top: -15px;
  bottom: -15px;
  background: linear-gradient(135deg, #a6a5a3, #cccbc9);
  background: -webkit-linear-gradient(-45deg, #a6a5a3, #cccbc9);
  z-index: -1;
}

.xycms_wap:after {
  left: -30px;
  right: -30px;
  top: -30px;
  bottom: -30px;
  background: linear-gradient(135deg, #f3f3f3, #7d7976);
  background: -webkit-linear-gradient(-45deg, #f3f3f3, #7d7976);
  z-index: -2;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5), 6px 6px 8px rgba(0, 0, 0, 0.25), 15px 15px 2px rgba(0, 0, 0, 0.12);
}

就这样，一个圆环立体图效果就好了，是不是很神奇呢？

需要特别注意的就是，在使用伪元素时，里面一个属性值是 content: "";必修有的，不然设置的伪元素是不起任何作用的。

还有的朋友是不是遇到符合不一样的，如:after有单冒号和::after区别，那是由于是CSS版本区别导致的，CSS3或者CSS2的区别，主要考虑的就是兼容性，学会伪元素，有时候还是能解决很多小问题的，简便又不失效果！