Html CSS框阴影自定义形状问题
我试过像图中那样的盒子 但无法获得盒子底部的阴影外观。甚至我也试过在css框阴影，但不能得到那个阴影 谁能给影子一个解决办法。提前感谢： .ss_tag3{ 位置：相对位置； -webkit过渡：所有200毫秒的易用性； -webkit转换：scale1； -ms转换：所有200毫秒的速度都很慢； -ms变换：scale1； -moz转换：所有200毫秒的速度都很慢； -moz变换：scale1； 过渡：所有200毫秒的速度都很慢； 变换：scale0.8； } .ss_tag3 h1{ 文本对齐：居中； } .ss_tag3.ss_头{ 背景：2b557d； 填充：2%7%7%； 位置：相对位置； 盒影：0 3px 3px bdc3c9； } .ss_tag3.ss_head:之后{ 内容：； 边框：28px实心透明； 位置：绝对位置； 左：41.5%； 底部：-42px； 边框顶部：15px实心2b557d； } .ss_标记3.ss_头h1{ 文本转换：大写； 颜色：fff； 边框底部：1px实心20476f； 盒影：0 1px 0 3a6998； 字号：800； 字体大小：32px； 垫底：7.4%； } .ss_tag3.ss_head.ss_price{ 垫面：4%； 右边填充：0； 左侧填充：0； } .ss_tag3.ss_head.ss_price.ss_left-div{ 文本对齐：居中； } .ss_tag3.ss_head.ss_price.ss_left-div span{ 颜色：f7f7f8； 文本转换：大写； 字体大小：33px； 字号：100； } .ss_tag3.ss_列表{ 背景：fff； 填充：14%7%7%； } .ss_标签3.ss_列表ul{ 页边距底部：0； 列表样式类型：无； } .ss_tag3.ss_列表ul li{ 边框底部：1px实心E3； 垫底：5%； 垫面：4%； } .ss_tag3.ss_列表ul li a{ 颜色：406387； 字号：17px； 字号：600； 填充：0； } .ss_tag3.ss_list ul li a.ss_list-style{ 填充：0； } .ss_tag3.ss_list ul li a.ss_list-style:before{ 内容：\2713\0020； 颜色：406387； } .ss_tag3.ss_列表ul li a.ss_列表内容{ 填充：0； } .ss_tag3.ss_列表ul li a:悬停{ 文字装饰：无； } .ss_tag3.ss_list ul li:最后一个孩子{ 边框底部：无； } .ss_tag3.ss_list ul li:最后一个孩子a.ss_list样式：之前{ 显示：无； } .ss_tag3.ss_foot-btn{ 文本对齐：居中； 背景：F5； 填充：5%0； } .ss_tag3.ss_foot-btn.ss_order-btn{ 文本转换：大写； 背景：2b557d； 边框：1px实心2b557d； 颜色：fff； 字体大小：15px； 字号：600； 填充：4px12px； 大纲：无； } 小组或团队 特价 现在联系Html CSS框阴影自定义形状问题,html,css,box-shadow,Html,Css,Box Shadow,我试过像图中那样的盒子 但无法获得盒子底部的阴影外观。甚至我也试过在css框阴影，但不能得到那个阴影 谁能给影子一个解决办法。提前感谢： .ss_tag3{ 位置：相对位置； -webkit过渡：所有200毫秒的易用性； -webkit转换：scale1； -ms转换：所有200毫秒的速度都很慢； -ms变换：scale1； -moz转换：所有200毫秒的速度都很慢； -moz变换：scale1； 过渡：所有200毫秒的速度都很慢； 变换：scale0.8； } .ss_tag3 h1{ 文本
使用此联机生成器而不是硬编码
使用此联机生成器而不是硬编码
我刚刚添加了以下几行代码：
.ss_tag3 {
position:relative;
box-shadow:0 1px 0px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
.ss_tag3:before, .ss_tag3:after {
content:"";
position:absolute;
z-index:-1;
box-shadow:0 0 20px rgba(0,0,0,0.4);
top:50%;
bottom:0;
left:40px;
right:40px;
border-radius:100px / 10px;
}
我刚刚添加了以下几行代码：
.ss_tag3 {
position:relative;
box-shadow:0 1px 0px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
.ss_tag3:before, .ss_tag3:after {
content:"";
position:absolute;
z-index:-1;
box-shadow:0 0 20px rgba(0,0,0,0.4);
top:50%;
bottom:0;
left:40px;
right:40px;
border-radius:100px / 10px;
}
必须使用伪元素 只需添加此代码段即可解决此问题：
.ss_tag3:before, .ss_tag3:after {
position: absolute;
content: "";
top: 120px;
bottom: 5px;
left: 50px;
right: 50px;
z-index: -1;
box-shadow: 0 0 12px 14px rgba(0, 0, 0, 0.1);
border-radius: 150px/20px;
必须使用伪元素 只需添加此代码段即可解决此问题：
.ss_tag3:before, .ss_tag3:after {
position: absolute;
content: "";
top: 120px;
bottom: 5px;
left: 50px;
right: 50px;
z-index: -1;
box-shadow: 0 0 12px 14px rgba(0, 0, 0, 0.1);
border-radius: 150px/20px;
您可以通过以下方式在页脚下方添加带方框阴影的椭圆：
.ss_foot-btn {
position: relative;
z-index: 1;
}
.ss_tag3::after {
content: ' ';
position: absolute;
z-index: 0;
left: 15%;
bottom: 0;
display: block;
width: 70%;
height: 40px;
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
您可以通过以下方式在页脚下方添加带方框阴影的椭圆：
.ss_foot-btn {
position: relative;
z-index: 1;
}
.ss_tag3::after {
content: ' ';
position: absolute;
z-index: 0;
left: 15%;
bottom: 0;
display: block;
width: 70%;
height: 40px;
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
哇！这就是我要问的。。谢谢，没问题。很乐意帮忙：哇。。这就是我要问的。。谢谢，没问题。很高兴能帮忙：