CSS：如何为标签或框添加阴影答案

【问题标题】：CSS : How can I add shadow to a label or boxCSS：如何为标签或框添加阴影
【发布时间】：2011-03-01 07:28:30
【问题描述】：

我有一个按钮，就像在 SO 上的一样，这里是它的 CSS：

.rfs .grey_btn{
   float: right;
   margin: 15px 5px;
}

现在我必须为其添加边框阴影，我尝试了边框半径和框阴影，但它没有给我正确的结果。

还有一个问题是我有一个标签或框说，现在我想增加那个框的大小，以便我把那个框内的文本向右移动，目前如果我把它向右移动到最后框的限制，所以我想增加框的大小，以便我可以将文本更向右推。

希望我已经把我的问题说清楚了。任何指导将不胜感激。

谢谢。

【问题讨论】：

标签： css user-interface frontend

【解决方案1】：

Box-Shadows 仅适用于某些现代浏览器，因为它们是 CSS3 属性。如何正确使用，可以看这里：http://www.css3.info/preview/box-shadow/

你可以为阴影效果使用背景图片，或者你可以使用带有边框的第二个标签（如跨度），但这是一个非常难看的解决方案。

对于您的标签问题：您是否尝试添加一个“向左分页”，它将您的文本移动到右侧并增加标签的宽度？

编辑：由于 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。这将导致这样的事情：

【讨论】：

【解决方案2】：

.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;
}

【讨论】：

【解决方案3】：

box-shadow 属性尚未得到广泛支持，但可以像这样实现：

img {
    -webkit-box-shadow: 5px 5px 10px #666;
    -moz-box-shadow: 5px 5px 10px #666;
    box-shadow: 5px 5px 10px #666;
}

不确定您对标签/盒子的要求是什么？

【讨论】：

如何增加标签或框的宽度？
标签是一个内联元素，所以如果你想设置它的宽度，你需要将它的显示属性更改为display:inline-block。如果您将其设置为最小宽度或根本不指定宽度，只要您设置溢出，它将扩展以包含您的内容：自动 IE：label {overflow:auto;border:1px solid #000;display:inline-block;}（添加边框以便您可以看到框形。）