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

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>