我想为我的所有元素添加阴影（见图）
但是我不知道如何为:: after添加正确的阴影。
我现在的CSS代码-
.controll_btn {
transition: all 0.1s ease;
position: relative;
width: 50px;
height: 40px;
background-color: #00a4ff;
cursor: pointer;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
border-radius: 4px;
border: none;
padding: 10px 15px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
outline: none;
z-index: 5;
}
.controll_btn::after {
content: "";
position: absolute;
right: 0;
bottom: -8px;
z-index: -50;
border-top: 11px solid #00a4ff;
border-left: 11px solid transparent;
filter: 0 0 6px 0 rgba(0, 0, 0, 0.3);
}
如果有人知道如何添加相同的盒子阴影，请写下！谢谢！
最佳答案
您可以使用dropshadow（）过滤器
.controll_btn {
margin:2em;
transition: all 0.1s ease;
position: relative;
width: 50px;
height: 40px;
background-color: #00a4ff;
cursor: pointer;
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.5), 0 0px 6px 2px rgba(0, 0, 0, 0.5);
border-radius: 4px;
border: none;
padding: 10px 15px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
outline: none;
z-index: 5;
}
.controll_btn::after {
content: "";
position: absolute;
right: 0;
bottom: -8px;
z-index: -50;
border-top: 11px solid #00a4ff;
border-left: 11px solid transparent;
filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 1));
}
body {background:yellow;}
/* zie smiley for ze fun */
.smiley {
background:white;
width:30px;
height:14px;
display:block;
margin:20px auto 0;
border-radius: 50% / 0 0 100% 100% ;
display:flex;
justify-content:space-between;
box-shadow: 0 0 2px black, inset 2px 2px 2px turquoise;
}
.smiley:before, .smiley:after {
content:'';
float:left;;
height:10px;
width:10px;
background:inherit;
border-radius:50%;
margin-top:-15px;
box-shadow:inherit;
}<div class="controll_btn"> <span class='smiley'></span></div>https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
关于html - 当if是三 Angular 形时，如何将box-shadow添加到:: after？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58893832/