日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供隆化網(wǎng)站建設(shè)、隆化做網(wǎng)站、隆化網(wǎng)站設(shè)計(jì)、隆化網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、隆化企業(yè)網(wǎng)站模板建站服務(wù)，10年隆化做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

• border-top-left-radius：為元素左上角設(shè)置圓角效果；
• border-top-right-radius：為元素右上角設(shè)置圓角效果；
• border-bottom-right-radius：為元素右下角設(shè)置圓角效果；
• border-bottom-left-radius：為元素左下角設(shè)置圓角效果；
• border-radius：上面四個(gè)屬性的簡(jiǎn)寫形式，可以同時(shí)為元素的四個(gè)角設(shè)置圓角效果。

上述函數(shù)的可選值如下表所示：

border-*-radius

通過(guò)上面的介紹我們知道，通過(guò) border-*-radius 系列函數(shù)能夠分別為元素的四個(gè)角設(shè)置圓角效果，函數(shù)的語(yǔ)法格式如下：

border-*-radius：[ | ]{1,2}

語(yǔ)法的含義為，需要為 border-*-radius 屬性提供 1~2 個(gè)參數(shù)，參數(shù)之間使用空格進(jìn)行分隔。其中第一個(gè)參數(shù)表示圓角水平方向的半徑或半軸，第二個(gè)參數(shù)表示圓角垂直方向的半徑或半軸，如果省略第二個(gè)參數(shù)，那么該參數(shù)將直接沿用第一個(gè)參數(shù)的值。

【示例】使用四個(gè) border-*-radius 屬性為元素設(shè)置圓角效果：

       


    

        border-top-left-radius: 2em 0.5em;

        border-top-right-radius: 1em 3em;

        border-bottom-right-radius: 4em 0.5em;

        border-bottom-left-radius: 1em 3em;
    
    

        border-top-left-radius:2em;

        border-top-right-radius:2em;

        border-bottom-right-radius:2em;

        border-bottom-left-radius:2em;
    

運(yùn)行結(jié)果如下圖所示：

border-radius

border-radius 屬性是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 四個(gè)屬性的簡(jiǎn)寫形式，使用 border-radius 可以同時(shí)設(shè)置四個(gè) border-*-radius 屬性。border-radius 屬性的格式如下：

border-radius：[ | ]{1,4} [ / [ | ]{1,4} ]?

語(yǔ)法說(shuō)明如下：

• border-radius 屬性可以接收兩組參數(shù)，參數(shù)之間使用斜杠 / 進(jìn)行分隔，每組參數(shù)都允許設(shè)置 1~4 個(gè)參數(shù)值，其中第一組參數(shù)代表圓角水平方向上的半徑或半軸，第二組參數(shù)代表圓角垂直方向上的半徑或半軸，如果省略第二組參數(shù)的值，那么該組參數(shù)將直接沿用第一組參數(shù)的值。
• 第一組參數(shù)中，如果提供全部的四個(gè)參數(shù)，那么將按照上左 top-left、上右 top-right、下右 bottom-right、下左 bottom-left 的順序作用于元素的四個(gè)角；如果提供三個(gè)參數(shù)，那么第一個(gè)參數(shù)將作用于元素的左上角 top-left，第二個(gè)參數(shù)將作用于元素的右上角 top-right 和左下角 bottom-left，第三個(gè)參數(shù)將作用于元素的右下角 bottom-right；如果提供兩個(gè)參數(shù)，那么第一個(gè)參數(shù)將作用于元素的左上角 top-left 和右下角 bottom-right，第二個(gè)參數(shù)將作用于元素的右上角 top-right 和左下角 bottom-left；如果只提供一個(gè)參數(shù)，那么該參數(shù)將同時(shí)作用于元素的四個(gè)角。
• 第二組參數(shù)同樣遵循第一組參數(shù)的規(guī)律，只是作用的方向不同。

【示例】使用 border-radius 屬性為元素設(shè)置圓角效果：

    


    
水平與垂直半徑相同時(shí)：
    

        
提供1個(gè)參數(shù)
border-radius:10px;
        
提供2個(gè)參數(shù)
border-radius:10px 20px;
        
提供3個(gè)參數(shù)
border-radius:10px 20px 30px;
        
提供4個(gè)參數(shù)
border-radius:10px 20px 30px 40px;
    
    
水平與垂直半徑不同時(shí)：
    

        
提供1個(gè)參數(shù)
border-radius:10px/5px;
        
提供2個(gè)參數(shù)
border-radius:10px 20px/5px 10px;
        
提供3個(gè)參數(shù)
border-radius:10px 20px 30px/5px 10px 15px;
        
提供4個(gè)參數(shù)
border-radius:10px 20px 30px 40px/5px 10px 15px 20px;
    

運(yùn)行結(jié)果如下圖所示：