CSS技術(shù)中,可以使用border-radius屬性為塊元素添加圓角。
/*基本語法*/ border-radius: 半徑1 [半徑2] [半徑3] [半徑4]; /*設(shè)置所有角為相同的半徑值*/ border-radius: 10px; /*設(shè)置不同的半徑值*/ border-radius: 10px 20px 30px 40px;
其中,border-radius屬性可以指定一個或多個半徑值。如果只指定一個,則四個角將使用相同的半徑值。如果指定兩個,第一個值指定水平半徑值,第二個值指定垂直半徑值。如果指定三個,則第一個值指定左上角和右下角的半徑值,第二個值指定右上角和左下角的半徑值,第三個值指定邊框厚度。如果指定四個,則第一個值指定左上角的半徑值,第二個值指定右上角的半徑值,第三個值指定右下角的半徑值,第四個值指定左下角的半徑值。
例:
/*為一個div元素添加圓角*/ div{ border-radius: 10px; } /*為一個按鈕樣式添加圓角*/ button{ border-radius: 5px; padding: 10px 20px; background-color: #f00; color: #fff; border: none; }
使用border-radius屬性可以為頁面設(shè)計帶來更加美觀的效果,同時可以增加網(wǎng)站的用戶體驗。
上一篇css 在線生成ul