CSS :如何将阴影添加到标签或框中
CSS :如何将阴影添加到标签或框中
提问于 2010-06-09 02:11:31
我有一个按钮，就像在Ask Question上一样，这是它的CSS：
.rfs .grey_btn{
float: right;
margin: 15px 5px;
}现在我必须添加边界阴影，我已经尝试了边界半径和长方体阴影，但它没有给我适当的结果。
另一个问题是，我有一个标签或框，现在我想增加框的大小，以便我将框内的文本向右移动，目前如果我将其向右移动，它将达到框的末端限制，因此我想增加框的大小，以便我可以将文本更多地向右推。
希望我已经把我的问题说清楚了。任何指导都将不胜感激。
谢谢。
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-06-09 02:28:03
box-shadow属性还没有得到广泛的支持，但可以像这样实现：
img {
-webkit-box-shadow: 5px 5px 10px #666;
-moz-box-shadow: 5px 5px 10px #666;
box-shadow: 5px 5px 10px #666;
}不确定您对标签/盒子的要求是什么？
Stack Overflow用户
发布于 2010-06-09 02:22:26
长方体阴影只能在一些现代浏览器中使用，因为它们是CSS3属性。如何正确使用它们，您可以在这里看到：http://www.css3.info/preview/box-shadow/
您可以使用背景图像来实现阴影效果，也可以使用带有边框的第二个标签(如span)，但这是一个非常好的解决方案。
对于你的标签问题:你有没有尝试过添加一个“pagging left”，它会将你的文本移到右边，并增加标签的宽度？
编辑：由于CSS3不是最终版本，每个浏览器都有自己的伪css3属性。向SO按钮添加阴影和额外的宽度和空间您可以在现代浏览器中使用这些CSS属性：
.nav a {
-khtml-box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888;
padding-left: 35px;
}编辑：添加了适用于Safari和KHTML浏览器的CSS。这将导致类似如下的结果：
Stack Overflow用户
发布于 2016-05-01 16:52:53
.rfs .grey_btn
{
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3000020
复制相关文章
相似问题
腾讯云开发者
