首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用css的Dropshadow

使用css的Dropshadow
EN

Stack Overflow用户
提问于 2011-10-02 22:31:24
回答 2查看 47.1K关注 0票数 11

我想在我的div中添加一个透明的dropshadow。我有一个容器,在它的后面我想放置一个dropshadow。我不想让dropshadow有颜色。这就是我到目前为止所知道的:

代码语言:javascript
复制
.content_right1{

    background:#fff;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
     border-radius:10px;

    -moz-box-shadow: 5px 5px 5px #99CCFF;
    -webkit-box-shadow: 5px 5px 5px #99CCFF ;
     box-shadow: 5px 5px 5px #99CCFF;

    /* other styles of the class */
    width:380px;
    float:left;

    margin-left:3px;
    padding:15px;

    min-height:450px;
    margin-left:15px;
}

我想添加不透明度,但当我这样做时,整个div的不透明度发生了变化。

EN

回答 2

Stack Overflow用户

发布于 2011-10-03 00:17:57

如果需要具有不透明度级别的dropshadow,则应使用rgba()作为其阴影颜色:

http://css-tricks.com/2151-rgba-browser-support/

编辑:

代码语言:javascript
复制
-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
box-shadow:5px 5px 5px rgba(0,0,0,0.3);
票数 41
EN

Stack Overflow用户

发布于 2011-10-02 23:00:18

虽然你的问题最终有点不透明(双关语),但下面的问题是否如你所愿?

代码语言:javascript
复制
-moz-box-shadow: 5px 5px 5px #dddddd;
-webkit-box-shadow: 5px 5px 5px #dddddd;
box-shadow: 5px 5px 5px #dddddd;

http://jsfiddle.net/zCTC8/2/

实际上,我所做的就是调整阴影的颜色值,这是声明(#dddddd#ddd)中的最后一个值。这些是十六进制值。有关更多示例,请参阅此处:

http://html-color-codes.com/

#ddd/#dddddd表示浅灰色;#eee较浅,#ccc较深,#fff为白色,#000为黑色。值#000表示RGB,有效值为0-9A-F (暗->亮),因此:

代码语言:javascript
复制
#f00 = red (R)
#0f0 = green (G)
#00f = blue (B)

#99CCFF from your question相当于#9CF,它提供中间的红色(9)、浅绿色(C)和白色(F)。这些值的混合给出了您看到的浅蓝色阴影,这就是为什么您将获得一种颜色,而不是“阴影”颜色(灰色)。

我的颜色理论在这里有点生疏,所以如果我搞错了,有没有人纠正我。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7626963

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档