CSS:如何在标签或框中添加阴影

时间:2010-06-08 18:11:31

标签: css user-interface frontend

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

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

现在我必须为它添加边框阴影,我尝试了border-radius和box-shadow,但它没有给我正确的结果。

另外一个问题是我有一个标签或盒子说现在我想增加那个盒子的大小,这样我就可以将那个盒子里面的文字向右移动,目前如果我把它移到右边而不是到达终点盒子的限制,所以我想增加盒子的大小,这样我就可以向右推文字了。

希望我的问题清楚明了。任何指导都将受到高度赞赏。

感谢。

3 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分:1)

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

您可以使用背景图像作为阴影效果,或者您可以使用带边框的第二个标记(如跨度),但这是一个非常流畅的解决方案。

对于您的标签问题:您是否尝试过添加“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。这将导致类似这样的事情: SO Button http://i45.tinypic.com/dpcnwz.png

答案 2 :(得分:0)

    AccessToken accessToken = AccessToken.getCurrentAccessToken();

    Bundle parameters = new Bundle(2);
    parameters.putString("type", "user");
    parameters.putString("q", "Albert Einstein");

    GraphRequest.Callback wrapper = new GraphRequest.Callback() {
        @Override
        public void onCompleted(GraphResponse response) {
            try {
                JSONObject  jso = response.getJSONObject();
                JSONArray   arr = jso.getJSONArray( "data" );

                for (int i = 0; i < (arr.length()); i++) {
                    JSONObject json_obj = arr.getJSONObject(i);

                    // START: Your code goes here
                    String id = json_obj.getString("id");
                    String name = json_obj.getString("name");
                    // ...
                    // END: Your code goes here
                }
            } catch (JSONException e) {
                Log.e("name: ", e.getMessage());
            }
        }
    };

    GraphRequest gr = new GraphRequest(accessToken, "search", parameters, HttpMethod.GET, wrapper);
    gr.executeAsync();