显示在背景图象下的CSS箱子阴影psudo元素

时间：2016-08-26 21:21:31

标签： html css html5 css3 box-shadow

有人能告诉我为什么我的蓝色背景下面的阴影会显示出来吗？

...
/*!
 * Start Bootstrap - Small Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Global Classes */

/* centered columns styles */

.row-centered {
  text-align: center;
}
.col-centered {
  display: inline-block;
  float: none;
  /* reset the text-align */
  text-align: left;
  /* inline-block space fix */
  margin-right: -4px;
}
.shadow-full {
  position: relative;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.shadow-full:before,
.shadow-full:after {
  content: "";
  position: absolute;
  z-index: -1;
  -webkit-box-shadow: 0 0 40px 30px rgba(45, 45, 45, 0.18);
  -moz-box-shadow: 0 0 40px 30px rgba(45, 45, 45, 0.18);
  box-shadow: 0 0 40px 30px rgba(45, 45, 45, 0.18);
  top: 0;
  bottom: 0;
  left: 0px;
  right: 0px;
  -moz-border-radius: 100px / 10px;
  border-radius: 430px / 30px;
}
.shadow-sides {
  position: relative;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.shadow-sides:before,
.shadow-sides:after {
  content: "";
  position: absolute;
  z-index: -1;
  -webkit-box-shadow: 0 0 7px 17px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0 0 7px 17px rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 7px 17px rgba(0, 0, 0, 0.08);
  top: -20px;
  bottom: -20px;
  left: 0px;
}
.nopadding {
  padding: 0px;
}
hr:not(.white) {
  background: #a12816;
  height: 1px;
  width: 100%;
}
.white hr {
  background: #f5f5f5;
}
.fullrule-medium {
  border-top: 13px solid #a12816;
  padding: 0px;
  margin: 0px;
  width: 100%
}
.fullrule-thin {
  border-top: 8px solid #a12816;
  padding: 0px;
  margin: 0px;
  width: 100%
}
h1,
h2,
h3,
h4 {
  font-family: Roboto-Bold;
}
.container.whitespace {
  margin-top: 50px;
  height: 0px;
  width: 100%;
}
.fullwidth {
  width: 100%;
  margin: 0px;
  padding: 0px;
  display: block;
  border-radius: 0px;
}
.glyphicon.glyphicon-chevron-right {
  font-size: 2.5rem;
}
/* Subcategories */

.subcats .container {
  padding: 27px 10px;
  min-height: 200px;
}
.subcats h2 {
  color: #E0B754;
  text-indent: 16px;
}
.subcats ul li > a {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: white;
}
.subcats ul i {
  color: white;
}
/* Main Banner Container */

.heading h1 {
  font-size: 32px;
  font-family: 'Roboto-Bold';
  color: #005da7;
  margin: 30 0 30;
}
.banner-head > .row.header {
  height: 500px;
}
.banner-head img {
  margin: 0px auto 0px auto;
}
.banner-head {
  background-size: cover;
  width: 100%;
}
/* join_bar */

.join_bar > p {
  margin: 20px 0;
}
/* well attributes */

.well.container-fluid {
  background-color: #eee;
  position: relative;
  z-index: -2;
}
.well [class~=col] {
  padding: 0;
}
.well {
  background-color: #eee;
  border-radius: 0px;
  padding: 64px 0 20px;
}
.well .container h4,
.well .container span {
  color: #005DA7;
  font-size: 1.9rem;
  font-weight: bold;
  text-align: left;
  margin-top: 5px;
}
.well .img-block {
  position: relative;
  padding: 0px;
  margin: 10px auto;
  border: 1px solid #6c6c6c;
  box-shadow: 0 2px 6px rgba(128, 128, 128, 0.9);
  width: 200px;
}
.well .img-block img {
  margin: 0;
  max-height: 100%;
  max-width: 100%;
}
.well .text-block {
  font-family: Roboto-Bold;
  padding: 0 5px;
  text-align: center;
}
.well h2,
.well a {
  margin-top: 3px;
  text-decoration: none;
  font-size: 20px;
}
/* Blog Panels */

.blog-panel {
  padding: 30px 0;
  background: url("/img/patt-bg.jpg");
  position: relative;
  z-index: -2;
  margin-bottom: -20px;
}
.blog-panel > .blue-bg {
  position: absolute;
  right: 0;
}
.blog-panel .row {
  margin: 0;
}
.blog-panel .panel {
  background-color: rgba(255, 255, 255, .5);
  border-radius: 6px;
  padding: 20px 10px;
  min-height: 170px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}
.blog-panel .panel h2 {
  font-size: 24px;
}
.blog-panel .panel p {
  height: auto;
  text-overflow: ellipsis;
  padding: 0;
}
.blog-panel .container-fluid {
  max-width: 1234px;
  position: relative;
}
.blog-panel .btn {
  margin: 20px 0 0;
}
.blog-panel .panel .img-rounded {
  width: 100%;
  position: relative;
  margin: auto;
  max-height: 130px;
  display: inline-block;
  min-height: 140px;
  padding-left: 5px;
  padding-bottom: 50%;
  background-size: cover;
}
/* Posts Panel */

.posts {
  margin-bottom: 20px;
}
.posts > .panel {
  margin-bottom: 20px;
}
.panel:after {
  margin-bottom: -20px;
}
/* Deal Panels*/

.deal-content {
  border: 2px dashed #E0B754;
  border-radius: 10px;
  margin-bottom: 20px;
}
.deal-content .img-thumbnail {
  width: 100%;
}
.deal-panel {
  position: relative;
  margin: -40px 0 -40px 0;
  border: 6px groove #96351A;
  border-style: groove;
  background: rgb(11, 87, 148);
  padding: 40px 20px;
}
.deal-panel .deal-header {
  position: relative;
  display: block;
  margin-bottom: 25px;
  word-break: normal;
  color: white;
}
.deal-panel .deal-header h3 {
  margin: 0;
  float: left;
  display: block;
  color: white;
}
.deal-panel .text-block {
  color: white;
  padding: 15px 10px;
}
.deal-panel .text-block h2 {
  margin: 0;
  line-height: 12px;
}
.deal-panel .text-block h2 a {
  line-height: 12px;
  font-family: 'Roboto-Bold';
  font-size: 16px;
  color: white;
}
.deal-panel .text-block h2 a:hover {
  text-decoration: underline;
}
.deal-panel .text-block span.deal-city {
  margin: 3px 0 5px 4px;
  display: block;
}
.deal-panel .text-block span.deal-city a {
  font-size: 14px;
  color: #c5c5c5;
}
.deal-panel .text-block span.deal-city a:hover {
  color: white;
  text-decoration: underline;
  text-shadow: 2px 0 1px black;
  font-family: 'Roboto-Bold';
}
.deal-panel .img-block {
  padding: 12px;
}
.deal-panel .img-block .img-rounded {
  width: 93%;
}
.deal-panel .btn-group {
  float: right;
  max-height: 20px;
}
.deal-panel i.icn-lrn {
  background: rgba(0, 0, 0, 0) url("../img/icons/icn-lrn.png") no-repeat scroll 0 0;
  display: block;
  float: right;
  height: auto;
  max-width: auto;
}
/* Button Mods */

a.btn {
  background: none;
  border-radius: 3px;
  border: 1px solid #a6452b;
  font-family: Roboto-Regular;
  color: #a6452b;
  font-size: 14px;
  margin-top: 10px;
}
a.btn:hover,
a.btn:focus {
  background: #a12816;
  border: none;
  color: #FFFFFF;
}
/* centered columns styles */

.row-centered {
  text-align: center;
}
.col-centered {
  display: inline-block;
  float: none;
  /* reset the text-align */
  text-align: left;
  /* inline-block space fix */
  margin-right: -4px;
}
.col-fixed {
  /* custom width */
  width: 320px;
}
.col-min {
  /* custom min width */
  min-width: 320px;
}
.col-max {
  /* custom max width */
  max-width: 320px;
}
@media (min-width: 992px) {
  .banner-head .banner-text {
    background-image: url('/img/landing/text-bg-white.png');
    background-size: 80%;
    background-repeat: no-repeat;
    padding: 20px 30px;
    position: absolute;
    right: 0;
    height: inherit;
    text-align: left;
  }
  .vrule {
    border-left: 1px dotted #C2C2C2;
    height: 80px;
    vertical-align: middle;
    position: absolute;
    margin-top: 25px;
  }
  .blog-panel .panel h2 {
    font-size: 19px;
    margin: 2px 0 5px;
  }
  .deal-panel .deal-header h3,
  .deal-panel .deal-header i {
    font-size: 2.5rem;
  }
  .join_bar .text-container {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 15px;
    position: relative;
    margin: auto;
    right: 100px;
    height: inherit;
    width: 60%;
    top: 20px;
    border-radius: 6px;
  }
  .join_bar {
    background-image: url('/img/join_bar_bg.jpg');
    position: relative;
    background-position: right top;
    padding: 30px 0 50px 0;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 300px;
    color: #F0EFEB;
    z-index: -1;
  }
  .banner-head img {
    display: none !important;
  }
  .banner-head {
    background-position: left center;
    background-attachment: scroll;
    background-repeat: no-repeat;
  }
  .banner-head .banner-text p {
    padding: inherit;
    width: 80%;
  }
}
@media (max-width: 991px) {
  .blog-panel .panel {
    min-height: 240px;
  }
  .deal-panel {
    position: relative;
    margin-top: 20px;
    border: 0;
    height: auto !important;
  }
  .deal-panel:before,
  .deal-panel:after {
    content: none;
  }
  .join_bar .text-container {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 15px;
    position: relative;
    margin: auto;
    height: inherit;
    width: 80%;
    top: 20px;
    border-radius: 6px;
  }
  .banner-head {
    background: none !important;
  }
  .banner-head .banner-text p {
    margin: 30px auto;
    max-width: 600px;
  }
  .well h2,
  .well a {
    font-size: 20px;
  }
  .join_bar {
    background-image: url('/img/join_bar_bg-transp.jpg');
    position: relative;
    background-position: right bottom;
    padding: 30px 0 50px 0;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 300px;
    color: #F0EFEB;
  }
}
@media(max-width: 767px) {
  .well.container-fluid {
    margin-bottom: 60px;
  }
  .deal-panel .deal-header h3,
  .deal-panel .deal-header i {
    font-size: 2rem;
  }
  .deal-panel {
    position: relative;
    margin: 0 -20px;
    padding: 25px 35px;
  }
  .deal-panel .btn-responsive {
    font-size: 110%;
  }
  .deal-panel .text-block {
    text-align: left;
  }
  .container {
    margin: auto;
  }
}
@media(max-width: 600px) {
  .header .header-text {
    border-left: 0px;
    height: auto;
  }
  .blog-panel .panel {
    margin-bottom: 30px;
  }
  .blog-panel .panel h2 {
    font-size: 19px;
  }
  .deal-panel {
    margin-top: 30px;
  }
  .deal-panel .deal-header {
    left: 0px;
  }
  .join_bar .text-container {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 15px;
    position: relative;
    margin: auto;
    height: inherit;
    width: 90%;
    overflow: scroll;
    top: 20px;
    border-radius: 6px;
  }
}
@media(max-width: 726px) {
  .deal-content .img-block {
    display: none;
    width: 0;
  }
  .deal-content .text-block {
    width: 100%;
    padding: 15px 15px;
  }
  .deal-content hr.white {
    margin: 5px 0;
  }
}

我使用的是我在本网站上找到的“effect7”风格：

css-tricks

我需要阴影出现在容器外面，而不是它。谢谢！

2 个答案:

答案 0 :(得分：0)

实际上:after对你背后蓝色背景的影子负责。

以下课程对此负责。

＆＃13;
＆＃13; 
.shadow-full:after {
  content: "";
  position: absolute;
  z-index: -1;
  -webkit-box-shadow: 0 0 40px 30px rgba(45, 45, 45, 0.18);
  -moz-box-shadow: 0 0 40px 30px rgba(45, 45, 45, 0.18);
  box-shadow: 0 0 40px 30px rgba(45, 45, 45, 0.18);
  top: 0;
  bottom: 0;
  left: 0px;
  right: 0px;
  -moz-border-radius: 100px / 10px;
  border-radius: 430px / 30px;
}
＆＃13;
＆＃13;
＆＃13;

更改实施方式或删除shadow-full:after

的方框阴影

答案 1 :(得分：0)

如果我理解正确，你仍然需要盒子阴影，但不希望效果显示为与图像重叠。如果是这种情况，效果来自于shadow-full类的：before和：之后的border-radius和-moz-border-radius属性：

.shadow-full:before, .shadow-full:after {
   content: "";
   position: absolute;
   z-index: -1;
  -webkit-box-shadow: 0 0 40px 30px rgba(45, 45, 45, 0.18);
  -moz-box-shadow: 0 0 40px 30px rgba(45, 45, 45, 0.18);
   box-shadow: 0 0 40px 30px rgba(45, 45, 45, 0.18);
   top: 0;
   bottom: 0;
   left: 0px;
   right: 0px;
   -moz-border-radius: 100px / 10px;
   border-radius: 430px / 30px;
}

删除这些样式以仅在外部看到框阴影：

-moz-border-radius: 100px / 10px;
 border-radius: 430px / 30px;

然而，这似乎是该风格的全部要点，因此您可能希望尝试减少模糊并在您的框阴影样式中分散半径（分别为第三和第四像素值）。

编辑：看起来我被其他答案中的评论打败了。那里也有一个很好的解释。

相关问题
最新问题