创建一个类似于元素背景深色的框阴影

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)：它可以使用实心bg。但是当有一个带有实线边框的白色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>

Answer 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;