Question

我正在尝试构建一个使用box-shadow amd的泛型悬停类，它可以使用多种颜色的按钮。出于这个原因，我希望每个按钮颜色的“阴影”都不同。我想弄清楚是否有办法使用或只设置阴影元素的颜色属性？

这就是我的意思：

/*Notice that .button shadows does not have a color value*/

.button {
    -webkit-box-shadow: 
    0px 8px 16px 0px;
    box-shadow:
    0px 8px 16px 0px;
}

.button:hover{
    -webkit-box-shadow: 
    0px 16px 16px 0px;
    box-shadow:
    0px 16px 16px 0px;
}

/*And color elements does not have other values for the shadow*/

.red{
    -webkit-box-shadow: 
    rgba(255, 0, 0, 0.1);
    box-shadow:
    rgba(255, 0, 0, 0.1);
}
.green{
    -webkit-box-shadow: 
    rgba(0, 255, 0, 0.1);
    box-shadow:
    rgba(0, 255, 0, 0.1);
}

......使用方法如下：

<div class="button red>Red Button</div>
<div class="button green>Green Button</div>

我希望能够解释这种情况。头脑风暴时间！

Answer 1

您需要添加color: red

.red{
    color:red
}
.green{
   color:green
}

由于color:属性也适用于文本，因此您需要使用span标记包装文本，并将color:black提供给span。

<强> DEMO

Answer 2

遗憾的是，无法仅指定此处指定的方框阴影的颜色：http://dev.w3.org/csswg/css3-background/#the-box-shadow

您需要为每个颜色类提供单独的框阴影规则。

Answer 3

在CSS3中没有box-shadow-color规则，因此对于不同的按钮，您需要指定所有阴影参数（大小，位置，颜色）。

Answer 4

使用单个菜单的颜色尝试此风格的css样式，你可以尝试使用阴影来设置而不是颜色......

HTMl代码

<div class="menu"> 
        <ul>
            <li class="active1"><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

CSS样式

.menu{
        font-family:Arial, Helvetica, sans-serif;
        color:white;
        float:left;
        position:absolute;  
        top:95px;
        width:855px;
        background-image:url(../images/bottom-menu-line.png);
        background-position:center bottom;
        background-repeat:no-repeat;
    }
    .menu ul{padding:0; margin-left:65px; border-radius:10px;}
    .menu ul li {
        float:left;
        border-radius:10px;
        width:110px;
        height:47px;
        list-style:none;
        padding:0;
        margin-left:5px;
        margin-right:5px;
        /*overflow:hidden*/
    }
    .menu ul li a {
        font-size:12px;
        color:#fffcc7;
        background-image:url(../images/button.png);
        background-position:center;
        height:47px;
        overflow:hidden;
        line-height:47px;
        text-decoration:none;
        width:110px;
        text-align:center;
        float:left;
        border-radius:10px;
    }
    .menu li {float:left; padding:0;}
    .menu ul li a:hover {
     margin: -3px;
    }
    .menu ul li:nth-of-type(6) a:hover {
     border:3px solid #c10202 !important;
     border-radius:10px !important;
    }
    .menu ul li:nth-of-type(5) a:hover {
    border:#c1d65f solid 3px;
    border-radius:10px;
    }
    .menu ul li:nth-of-type(4) a:hover {
    border:#01d290 solid 3px;
    border-radius:10px;
    }
    .menu ul li:nth-of-type(3) a:hover {
    border:#904ca1 solid 3px;
    border-radius:10px;
    }
    .menu ul li:nth-of-type(2) a:hover {
    border:#00caf3 solid 3px;
    border-radius:10px;
    }
    .menu ul li:nth-of-type(1) a:hover {
    border:3px #d44c1f solid;
    border-radius:10px;
    }
    .active1{
    border:3px #d44c1f solid;   
    width:110px !important;
    border-radius:10px;
    height:47px !important;
    margin-bottom:7px !important;
    margin-right:5px !important;
    }
    .active2{
    border:#00caf3 solid 3px;   
    width:110px !important;
    border-radius:10px;
    height:47px !important;
    margin-bottom:7px !important;
    margin-right:5px !important;
    }
    .active3{
    border:#904ca1 solid 3px;   
    width:110px !important;
    border-radius:10px;
    height:47px !important;
    margin-bottom:7px !important;
    margin-right:5px !important;
    }
    .active4{
    border:#01d290 solid 3px;   
    width:110px !important;
    border-radius:10px;
    height:47px !important;
    margin-bottom:7px !important;
    margin-right:5px !important;
    }
    .active5{
    border:#c1d65f solid 3px;   
    width:110px !important;
    border-radius:10px;
    height:47px !important;
    margin-bottom:7px !important;
    margin-right:5px !important;
    }
    .active6{
    border:3px solid #c10202;   
    width:110px !important;
    border-radius:10px;
    height:47px !important;
    margin-bottom:7px !important;
    margin-right:5px !important;
    }

Answer 5

不，你不能，你必须将2个案例正常并悬停在每个按钮

http://dev.w3.org/csswg/css3-background/#the-box-shadow

CSS Box Shadow - 悬停类

5 个答案: