0

我正在尝试构建一个使用 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>

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

4

5 回答 5

1

您需要添加color: red 

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

由于color:属性也适用于文本，因此您需要用span标签包装文本并给出color:blackto span。

演示

于 2013-02-06T11:23:21.893 回答
0

不幸的是，没有办法只指定这里指定的盒子阴影的颜色：http: //dev.w3.org/csswg/css3-background/#the-box-shadow

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

于 2013-02-06T11:20:50.727 回答
0

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

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

于 2013-02-06T16:01:43.030 回答
0

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

于 2013-02-06T11:22:42.033 回答
0

使用颜色为单个菜单尝试此样式中的此 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;
    }
于 2013-02-06T11:56:39.493 回答