分享你的福利
www.fankuiba.com

[CSS3]采用伪类给body设置内阴影效果

当我们需要给一个页面设置内阴影效果时,一般都是先设置一个高度和宽度的100%的div盒子,然后给这个盒子设置内部阴影,但是若使用CSS3的伪类before,采用以下的代码,我们可以更轻松地给body标签设置内阴影的样式。

效果

body内阴影

CSS代码

body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 100;
}

演示地址

本文出处:https://www.uedsc.com/webpage-top-box-shadow.html

反馈吧 | 分享你的福利吧 » [CSS3]采用伪类给body设置内阴影效果