作者:小叶2502854061 | 来源:互联网 | 2023-05-26 07:25
我有一个div调用.testimonial-inner
并使用:after
伪元素我有一个箭头位于它下面指向下方.我遇到的问题是为它添加一个盒子阴影,所以它们看起来都像一个自然元素.
没有box-shadow
三角形:
body {
background: #eee
}
.testimonial-inner {
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 30px;
display: block;
margin-bottom: 25px;
position: relative;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.testimonial-inner:after {
top: 100%;
left: 48px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 18px;
margin-left: -18px;
}
Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.
请注意,框阴影当前不会环绕箭头.
当我将它添加到:after
声明中时,我得到以下结果:
body {
background: #eee
}
.testimonial-inner {
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 30px;
display: block;
margin-bottom: 25px;
position: relative;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.testimonial-inner:after {
top: 100%;
left: 48px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 18px;
margin-left: -18px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.
1> tolmark..:
过滤器可以工作:
.shadowed {
-webkit-filter: drop-shadow(0px 2px 2px rgba(130,130,130,1));
filter : drop-shadow(0px 2px 2px rgba(130,130,130,1));
-ms-filter : "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
filter : "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
}
工作示例:http://codepen.io/tolmark12/pen/JopNeR?editors = 110
了解更多信息:创建真正的跨浏览器投影
2> Weafs.py..:
您可以添加另一个:伪元素,将其旋转45deg
并添加box-shadow
到其中.
更新小提琴
body {
background: #eee
}
.testimonial-inner {
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 30px;
display: block;
margin-bottom: 25px;
position: relative;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.testimonial-inner:after {
top: 100%;
left: 48px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 18px;
margin-left: -18px;
}
.testimonial-inner:before {
content: '';
position: absolute;
transform: rotate(45deg);
width: 36px;
height: 36px;
bottom: -12px;
z-index: -1;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.