2

我有一个按钮,就像Ask Question在 SO 上一样,这里是它的 CSS:

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

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

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

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

谢谢。

4

3 回答 3

2

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

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

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

于 2010-06-08T18:28:03.177 回答
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。这将导致这样的事情: 按钮

于 2010-06-08T18:22:26.247 回答
0
.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;
}
于 2016-05-01T08:52:52.837 回答