创建一个像元素背景的深色一样的盒子阴影答案

【问题标题】：Creating a box shadow like a deep color of the element's background创建一个像元素背景的深色一样的盒子阴影
【发布时间】：2015-05-05 03:07:49
【问题描述】：

所以 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) ：它适用于固体 bg 。但是当有一个带有实线边框的白色背景时，它看起来是黑色的

【问题讨论】：

我会在 JS 中这样做。获取要应用阴影的元素的当前背景颜色，计算新颜色并应用正确的阴影颜色

标签： jquery html css

【解决方案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>

【讨论】：

【解决方案2】：

您将像这样使用 inset 命令：

-webkit-box-shadow: 0 0 1px 3px #000 inset;
-moz-box-shadow: 0 0 1px 3px #000 inset;
box-shadow: 0 0 1px 3px #000 inset;

【讨论】：