Question

我正在寻找一种方法，只有在他们已经拥有边框时才向所有div添加box-shadow。很多div只是用于定位。

div{
    box-shadow: 0 0 1pt 2pt black;
}

当然太多了。我在想这个，但我找不到正确的语法：

div[style*="border-width:1px;"]{
    box-shadow: 0 0 1pt 2pt black;
}

我正在寻找的代码不应该针对特定的页面或结构。这是每个页面的自定义用户风格。

Answer 1

我不确定这样做的纯CSS方式，但是如果对你有好处的话，我已经设法得到了一个jQuery解决方案。

该按钮仅用于演示之前和之后。我假设在您的真实项目中，您希望在文档就绪时执行此操作。

$('#shadowMeUp').click(function(){
  $("div")
    .filter(function() {
      return $(this).css('border-style') == "solid"
    })
    .addClass("shadow");
});

.box {
  height: 100px;
  width: 100px;
  background-color: steelblue;
  margin: 15px;
  display: inline-block;
}

.border_box {
  border-width: 5px;
  border-color: indianred;
  border-style: solid;
}

.shadow {
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<button id="shadowMeUp">Add shadows</button>

<br>

<div class="box border_box"></div>
<div class="box"></div>
<div class="box border_box"></div>
<div class="box"></div>

Answer 2

对不起，这个没有纯CSS解决方案...

如上所述，您可以使用javascript来检测哪些元素具有UseIISIntegration，然后将自定义框阴影应用于它们，但这可能是一个非常糟糕的做法，并且可能会带来巨大的性能成本你的页面。

如果存在边框，则在div上应用box-shadow

2 个答案: