CSS Box阴影自定义形状问题

时间：2016-08-29 10:09:47

标签： html css box-shadow

我在图片中尝试过这个盒子。

image

但无法在盒子底部看到阴影。即使我已经尝试过css-matic的盒子阴影，但也无法获得那个阴影。

任何人都可以为影子提供解决方案。提前谢谢：）

.ss_tag3 {
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(0.8);
}
.ss_tag3 h1{
  text-align:center;
  }
.ss_tag3 .ss_head {
  background: #2b557d;
  padding: 2% 7% 7%;
  position: relative;
  box-shadow: 0 3px 3px #bdc3c9;
}
.ss_tag3 .ss_head:after {
  content: '';
  border: 28px solid transparent;
  position: absolute;
  left: 41.5%;
  bottom: -42px;
  border-top: 15px solid #2b557d;
}
.ss_tag3 .ss_head h1 {
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid #20476f;
  box-shadow: 0 1px 0 #3a6998;
  font-weight: 800;
  font-size: 32px;
  padding-bottom: 7.4%;
}
.ss_tag3 .ss_head .ss_price {
  padding-top: 4%;
  padding-right: 0;
  padding-left: 0;
}
.ss_tag3 .ss_head .ss_price .ss_left-div {
  text-align: center;
}
.ss_tag3 .ss_head .ss_price .ss_left-div span {
  color: #f7f7f8;
  text-transform: capitalize;
  font-size: 33px;
  font-weight: 100;
}
.ss_tag3 .ss_list {
  background: #fff;
  padding: 14% 7% 7%;
}
.ss_tag3 .ss_list ul {
  margin-bottom: 0;
  list-style-type: none;
}
.ss_tag3 .ss_list ul li {
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 5%;
  padding-top: 4%;
}
.ss_tag3 .ss_list ul li a {
  color: #406387;
  font-size: 17px;
  font-weight: 600;
  padding: 0;
}
.ss_tag3 .ss_list ul li a .ss_list-style {
  padding: 0;
}
.ss_tag3 .ss_list ul li a .ss_list-style:before {
  content: "\2713\0020";
  color: #406387;
}
.ss_tag3 .ss_list ul li a .ss_list-content {
  padding: 0;
}
.ss_tag3 .ss_list ul li a:hover {
  text-decoration: none;
}
.ss_tag3 .ss_list ul li:last-child {
  border-bottom: none;
}
.ss_tag3 .ss_list ul li:last-child a .ss_list-style:before {
  display: none;
}
.ss_tag3 .ss_foot-btn {
  text-align: center;
  background: #f5f5f5;
  padding: 5% 0;
}
.ss_tag3 .ss_foot-btn .ss_order-btn {
  text-transform: uppercase;
  background: #2b557d;
  border: 1px solid #2b557d;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 4px 12px;
  outline: none;
}
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ss_tag3">
<div class="ss_head">
 <h1>groups or teams</h1>
 <div class="container-fluid ss_price">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ss_left-div">
<span> special pricing</span>
 </div>
 </div>
</div>   
<div class="ss_list">
<ul>
<li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content"> 
Contact Sales to ask about special pricing for accounts over 5 people.</span></a></li>
<li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content"> sales@AFrameSoftware. com</span></a></li>
</ul>
</div>
<div class="ss_foot-btn">
<button type="button" class="btn btn-primary ss_order-btn">contact now</button>
</div>
</div>

4 个答案:

答案 0 :(得分：4)

我刚刚添加了以下几行代码：

.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;
}

:before和:after部分是构成底部阴影的部分。随意摆弄这一个。下面的代码段。

＆＃13;
＆＃13; 
.ss_tag3 {
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(0.8);
}
.ss_tag3 h1{
  text-align:center;
  }
.ss_tag3 .ss_head {
  background: #2b557d;
  padding: 2% 7% 7%;
  position: relative;
  box-shadow: 0 3px 3px #bdc3c9;
}
.ss_tag3 .ss_head:after {
  content: '';
  border: 28px solid transparent;
  position: absolute;
  left: 41.5%;
  bottom: -42px;
  border-top: 15px solid #2b557d;
}
.ss_tag3 .ss_head h1 {
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid #20476f;
  box-shadow: 0 1px 0 #3a6998;
  font-weight: 800;
  font-size: 32px;
  padding-bottom: 7.4%;
}
.ss_tag3 .ss_head .ss_price {
  padding-top: 4%;
  padding-right: 0;
  padding-left: 0;
}
.ss_tag3 .ss_head .ss_price .ss_left-div {
  text-align: center;
}
.ss_tag3 .ss_head .ss_price .ss_left-div span {
  color: #f7f7f8;
  text-transform: capitalize;
  font-size: 33px;
  font-weight: 100;
}
.ss_tag3 .ss_list {
  background: #fff;
  padding: 14% 7% 7%;
}
.ss_tag3 .ss_list ul {
  margin-bottom: 0;
  list-style-type: none;
}
.ss_tag3 .ss_list ul li {
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 5%;
  padding-top: 4%;
}
.ss_tag3 .ss_list ul li a {
  color: #406387;
  font-size: 17px;
  font-weight: 600;
  padding: 0;
}
.ss_tag3 .ss_list ul li a .ss_list-style {
  padding: 0;
}
.ss_tag3 .ss_list ul li a .ss_list-style:before {
  content: "\2713\0020";
  color: #406387;
}
.ss_tag3 .ss_list ul li a .ss_list-content {
  padding: 0;
}
.ss_tag3 .ss_list ul li a:hover {
  text-decoration: none;
}
.ss_tag3 .ss_list ul li:last-child {
  border-bottom: none;
}
.ss_tag3 .ss_list ul li:last-child a .ss_list-style:before {
  display: none;
}
.ss_tag3 .ss_foot-btn {
  text-align: center;
  background: #f5f5f5;
  padding: 5% 0;
}
.ss_tag3 .ss_foot-btn .ss_order-btn {
  text-transform: uppercase;
  background: #2b557d;
  border: 1px solid #2b557d;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 4px 12px;
  outline: none;
}




.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	width:70%;
	height:200px;
	background:#FFF;
	margin:40px auto;
}

.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;
}
＆＃13; 
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ss_tag3">
<div class="ss_head">
 <h1>groups or teams</h1>
 <div class="container-fluid ss_price">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ss_left-div">
<span> special pricing</span>
 </div>
 </div>
</div>   
<div class="ss_list">
<ul>
<li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content"> 
Contact Sales to ask about special pricing for accounts over 5 people.</span></a></li>
<li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content"> sales@AFrameSoftware. com</span></a></li>
</ul>
</div>
<div class="ss_foot-btn">
<button type="button" class="btn btn-primary ss_order-btn">contact now</button>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

你必须使用伪元素。

只需添加此代码段即可解决问题：

.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;

}

工作示例： http://codepen.io/roslane/pen/VjoqNb

答案 2 :(得分：1)

您可以通过以下方式在页脚下方添加box-shadow的椭圆：

.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);
}

在JSFiddle或以下检查：

body {
    background: none #EBEBEB;
}
.ss_tag3 {
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(0.8);
}
.ss_tag3 h1{
  text-align:center;
  }
.ss_tag3 .ss_head {
  background: #2b557d;
  padding: 2% 7% 7%;
  position: relative;
  box-shadow: 0 3px 3px #bdc3c9;
}
.ss_tag3 .ss_head:after {
  content: '';
  border: 28px solid transparent;
  position: absolute;
  left: 41.5%;
  bottom: -42px;
  border-top: 15px solid #2b557d;
}
.ss_tag3 .ss_head h1 {
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid #20476f;
  box-shadow: 0 1px 0 #3a6998;
  font-weight: 800;
  font-size: 32px;
  padding-bottom: 7.4%;
}
.ss_tag3 .ss_head .ss_price {
  padding-top: 4%;
  padding-right: 0;
  padding-left: 0;
}
.ss_tag3 .ss_head .ss_price .ss_left-div {
  text-align: center;
}
.ss_tag3 .ss_head .ss_price .ss_left-div span {
  color: #f7f7f8;
  text-transform: capitalize;
  font-size: 33px;
  font-weight: 100;
}
.ss_tag3 .ss_list {
  background: #fff;
  padding: 14% 7% 7%;
}
.ss_tag3 .ss_list ul {
  margin-bottom: 0;
  list-style-type: none;
}
.ss_tag3 .ss_list ul li {
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 5%;
  padding-top: 4%;
}
.ss_tag3 .ss_list ul li a {
  color: #406387;
  font-size: 17px;
  font-weight: 600;
  padding: 0;
}
.ss_tag3 .ss_list ul li a .ss_list-style {
  padding: 0;
}
.ss_tag3 .ss_list ul li a .ss_list-style:before {
  content: "\2713\0020";
  color: #406387;
}
.ss_tag3 .ss_list ul li a .ss_list-content {
  padding: 0;
}
.ss_tag3 .ss_list ul li a:hover {
  text-decoration: none;
}
.ss_tag3 .ss_list ul li:last-child {
  border-bottom: none;
}
.ss_tag3 .ss_list ul li:last-child a .ss_list-style:before {
  display: none;
}
.ss_tag3 .ss_foot-btn {
  text-align: center;
  background: #f5f5f5;
  padding: 5% 0;
}
.ss_tag3 .ss_foot-btn .ss_order-btn {
  text-transform: uppercase;
  background: #2b557d;
  border: 1px solid #2b557d;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 4px 12px;
  outline: none;
}
.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);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ss_tag3">
    <div class="ss_head">
        <h1>groups or teams</h1>
        <div class="container-fluid ss_price">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ss_left-div">
                <span> special pricing</span>
            </div>
        </div>
    </div>
    <div class="ss_list">
        <ul>
            <li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content"> 
Contact Sales to ask about special pricing for accounts over 5 people.</span></a></li>
            <li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content"> sales@AFrameSoftware. com</span></a></li>
        </ul>
    </div>
    <div class="ss_foot-btn">
        <button type="button" class="btn btn-primary ss_order-btn">contact now</button>
    </div>
</div>

答案 3 :(得分：0)

使用此在线生成器而不是硬编码..

tooltip generator

相关问题
最新问题