当if是三角形时，如何将box-shadow添加到:: after？

2024-05-19 • 问答

我想为所有元素添加阴影（见图）

但是我不知道如何为:: 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.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.3);
}

如果有人知道如何添加相同的盒子阴影，请写下！谢谢！

有already an answer表示要向同一类添加:before伪元素，然后设置box-shadow和transform: rotate(45deg)。

您可以使用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.5),0 0px 6px 2px rgba(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,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

当if是三角形时，如何将box-shadow添加到:: after？

chengzhangba 回答：当if是三角形时，如何将box-shadow添加到:: after？

大家都在问