CSS：如何将阴影添加到标签或框中

我有一个按钮，就像有

问问题

一样，这里是它的CSS：

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

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

另外一个问题是，我有一个标签或框，现在我想增加框的大小，这样我就可以将框内的文本向右移动，当前如果我将其向右移动，它就会达到框的末端限制，所以我想增加框的大小，这样我就可以将文本推向右侧

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

---

谢谢

框阴影仅适用于某些现代浏览器，因为它们是CSS3属性。如何正确使用它们，您可以在此处看到：

你可以使用背景图像来产生阴影效果，也可以使用第二个带有边框的标记（比如跨距），但这是一个非常糟糕的解决方案

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

编辑：由于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。这将导致如下结果：

---

长方体阴影属性尚未得到广泛支持，但可以像以下那样实现：

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

---

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

如何增加标签或框的宽度？标签是一个内联元素，因此如果要设置其宽度，您需要将其显示属性更改为

display:inline block

。如果将其设置为最小宽度或根本不指定宽度，则只要设置溢出：自动，它将展开以包含您的内容，即：

label{overflow:auto；border:1px solid#000；display:inline block；}

（添加边框以查看框的形状）

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