::綠細胞雜誌::

Would you like to react to this message? Create an account in a few clicks or log in to continue.

紀錄生活一切雜事


    css 3圆角实现方法

    grass0423
    grass0423
    grass0423
    Admin


    文章數 : 122
    注冊日期 : 2010-02-23
    • 1 樓

    css 3圆角实现方法 Empty css 3圆角实现方法

    發表  grass0423 周五 1月 28, 2011 11:57 am

    代碼:
    <body>
    <div id="box"></div>
    </body>
    在CSS中，我们应该给他定义一个宽度和高度，当然还有背景。
    代碼:
    #box {
            width:590px;
            height:100px;
            background-color:#6B86A6;
            ｝

    好了，准备工作都已经就绪了，那么我们就开始做圆角吧，其实很简单。 css3 圆角
    1.对4个角都设置。 css3 圆角

    代碼:
    #box { -moz-border-radius: 20px; }
    css 3圆角实现方法 1_100910

    代碼:
    #box {
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 20px;
        -webkit-border-bottom-right-radius: 30px;
        -webkit-border-bottom-left-radius: 40px; }
    控制各个位置


    css 3圆角实现方法 0r601310
    • 回頂端
    grass0423
    grass0423
    grass0423
    Admin


    文章數 : 122
    注冊日期 : 2010-02-23
    • 2 樓

    css 3圆角实现方法 Empty 回復： css 3圆角实现方法

    發表  grass0423 周五 1月 28, 2011 2:38 pm

    FireFox下實現圓角border-radius (css3.0 新增)
    css3.0中新增屬性：border-radius
    用這個屬性能實現圓角邊框的效果。現在只有Mozilla/Firefox和Safari3支持該屬性。

    代碼:
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;

    分別代表上左、上右、下左、下右四個角
    如果要在safari3中支持，就將前面的-moz改為-webkit
    P.S.WordPress v2.5以上版本的後台登錄頁面就用到了此屬性。
    • 回頂端
      現在的時間是 周四 9月 19, 2024 10:34 am