We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
1、阴影很容易实现,内阴影+外阴影 .box-shadow1{ box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; } 2、然后使用伪类在元素的后面添加一个“可适配”的阴影,为了可适配,我们就要使用相对定位,实现代码如下 .box-shadow1{ position:relative; box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; } .box-shadow1:after{ content:""; position:absolute; background:transparent; top:50%; //设置宽高仅仅设置上下左右边距是为了让系统自动定位。 bottom: 1px; left: 10px; right: 10px; z-index: -1; //将副阴影置于主阴影下 box-shadow: 0 0 20px rgba(0,0,0,0.7); border-radius: 100px/10px; }
如此即实现了曲线阴影的效果。
<div class="box box-shadow1">将box-shadow1作为类使用即可</div>
翘边阴影 同理,翘边阴影可以在基础阴影下叠加两个平行四边形即可。
.box-shadow2{ position:relative; box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; } .box-shadow2:before,.box-shadow2:after{ content: ""; position:absolute; top:20px;bottom: 22px; background: transparent; box-shadow: 0 8px 20px rgba(0,0,0,0.7); z-index: -1; background: #fff; } .box-shadow2:before{ left: 22px; right:12px; transform: skew(-12deg) rotate(-4deg); } .box-shadow2:after{ left: 12px; right:22px; transform: skew(12deg) rotate(4deg); }
The text was updated successfully, but these errors were encountered:
No branches or pull requests
如此即实现了曲线阴影的效果。
翘边阴影
同理,翘边阴影可以在基础阴影下叠加两个平行四边形即可。
The text was updated successfully, but these errors were encountered: