Question

任何人都有任何想法

box-shadow：inset 0px 0px 0px 3px＃f14fa1;

是否申请包含在图片中的链接？我有点难以理解为什么它不能用它以类似的方式使用它。

.ty-product-thumbnails__item {
  margin: 0 8px 10px 0;
}
.ty-product-thumbnails__item.active {
  border: 1px solid #edeff1;
}
.ty-product-thumbnails__item.active {
  -webkit-box-shadow: inset 0px 0px 0px 3px #f14fa1;
  -moz-box-shadow: inset 0px 0px 0px 3px #f14fa1;
  box-shadow: inset 0px 0px 0px 3px #f14fa1;
}

<link href="http://2015.ambientlounge.com/var/cache/misc/assets/design/themes/ambientlounge/css/standalone.88d87b4a7fc31ccb7652f00418d997481438711860.css" rel="stylesheet" />
<div class="ty-product-thumbnails ty-center cm-image-gallery" id="images_preview_74455c1004e13f47" style="width: 400px;">
  <a data-ca-gallery-large-id="det_img_link_74455c1004e13f47_2713" class="cm-thumbnails-mini active ty-product-thumbnails__item">
    <img class="ty-pict    " id="det_img_74455c1004e13f47_2713_mini" src="http://2015.ambientlounge.com/images/thumbnails/55/55/detailed/2/luscious-grey-1.jpg?t=1438314416" alt="" title="">
  </a>
  <a data-ca-gallery-large-id="det_img_link_74455c1004e13f47_3840" class="cm-thumbnails-mini ty-product-thumbnails__item">
    <img class="ty-pict    " id="det_img_74455c1004e13f47_3840_mini" src="http://2015.ambientlounge.com/images/thumbnails/55/55/detailed/3/luscious-grey-2_u7is-mj.jpg?t=1438314417" alt="" title="">
  </a>
  <a data-ca-gallery-large-id="det_img_link_74455c1004e13f47_3841" class="cm-thumbnails-mini ty-product-thumbnails__item">
    <img class="ty-pict    " id="det_img_74455c1004e13f47_3841_mini" src="http://2015.ambientlounge.com/images/thumbnails/55/55/detailed/3/luscious-grey-3.jpg?t=1438314417" alt="" title="">
  </a>
  <a data-ca-gallery-large-id="det_img_link_74455c1004e13f47_3842" class="cm-thumbnails-mini ty-product-thumbnails__item">
    <img class="ty-pict    " id="det_img_74455c1004e13f47_3842_mini" src="http://2015.ambientlounge.com/images/thumbnails/55/55/detailed/3/luscious-grey-4.jpg?t=1438314417" alt="" title="">
  </a>
  <a data-ca-gallery-large-id="det_img_link_74455c1004e13f47_3843" class="cm-thumbnails-mini ty-product-thumbnails__item">
    <img class="ty-pict    " id="det_img_74455c1004e13f47_3843_mini" src="http://2015.ambientlounge.com/images/thumbnails/55/55/detailed/3/luscious-grey-5_1s1r-7o.jpg?t=1438314417" alt="" title="">
  </a>
  <a data-ca-gallery-large-id="det_img_link_74455c1004e13f47_3844" class="cm-thumbnails-mini ty-product-thumbnails__item">
    <img class="ty-pict    " id="det_img_74455c1004e13f47_3844_mini" src="http://2015.ambientlounge.com/images/thumbnails/55/55/detailed/3/luscious-grey-6.jpg?t=1438314417" alt="" title="">
  </a>
  <a data-ca-gallery-large-id="det_img_link_74455c1004e13f47_3845" class="cm-thumbnails-mini ty-product-thumbnails__item">
    <img class="ty-pict    " id="det_img_74455c1004e13f47_3845_mini" src="http://2015.ambientlounge.com/images/thumbnails/55/55/detailed/3/luscious-grey-7.jpg?t=1438314417" alt="" title="">
  </a>
  <a data-ca-gallery-large-id="det_img_link_74455c1004e13f47_3846" class="cm-thumbnails-mini ty-product-thumbnails__item">
    <img class="ty-pict    " id="det_img_74455c1004e13f47_3846_mini" src="http://2015.ambientlounge.com/images/thumbnails/55/55/detailed/3/luscious-grey_mnn7-8j.jpg?t=1438314418" alt="" title="">
  </a>
  <a data-ca-gallery-large-id="det_img_link_74455c1004e13f47_3847" class="cm-thumbnails-mini ty-product-thumbnails__item">
    <img class="ty-pict    " id="det_img_74455c1004e13f47_3847_mini" src="http://2015.ambientlounge.com/images/thumbnails/55/55/detailed/3/dims-butterfly_1q5y-65.jpg?t=1438314418" alt="" title="">
  </a>
</div>

Answer 1

图像覆盖了您的盒子阴影。尝试使用psuedo元素，并将其放在图像的顶部。

.ty-product-thumbnails__item.active {
    position: relative;
    z-index: 0;
}

.ty-product-thumbnails__item.active:after {
    content: '';
    display: block;
    box-shadow: inset 0px 0px 0px 3px #f14fa1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

box-shadow无法在包装缩略图的普通链接上工作

1 个答案: