Skip to content
New issue

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

245.[开发及性能优化]CSS3实现曲线阴影和翘边阴影 #245

Open
webVueBlog opened this issue Aug 25, 2020 · 0 comments
Open

245.[开发及性能优化]CSS3实现曲线阴影和翘边阴影 #245

webVueBlog opened this issue Aug 25, 2020 · 0 comments

Comments

@webVueBlog
Copy link
Member

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); 
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant