jquery - 创建像元素背景的深色一样的框阴影

Question

所以 css3 的新特性是 box-shadow 。有什么方法可以像元素的背景颜色一样创建元素的框阴影吗？

例如:

<button class="btn-blue">

它有CSS: .btn-blue{background: blue}

所以我想用 css 像深蓝色一样放置阴影:

.btn-blue{box-shadow : 2px 2px 2px #489EFD}

有没有什么方法可以不使用其他方法来创建阴影？因为如果我有 10 种不同的颜色，我必须为框阴影定义 10 种额外的 css hex/rgba/hsla 颜色。我想减少它们。

注意事项

我试过了inset与 rgba(0,0,0,.3) : 它适用于 solid bg 。但是当有一个带有实线边框的白色背景时，它看起来是黑色的

Answer 1

您可以使用一小段 jquery 遍历每个按钮元素，并应用框阴影。例如，

$(document).ready(function() {
  
  $('button').each(function() { /*loop through each button element*/
    var col = $(this).css("background-color"); /*get its background color*/
    $(this).css("box-shadow", "2px 2px 5px " + col); /*apply a box shadow*/
  });
});

.btn-blue {background: blue}
.btn-red {background: red}
.btn-green {background: green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-blue">button1</button>
<button class="btn-red">button2</button>
<button class="btn-green">button3</button>