网页前端知识汇总(九)—— 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的区别,主要考虑的就是兼容性,学会伪元素,有时候还是能解决很多小问题的,简便又不失效果!