CSS3:border-radius隱藏的威力
阿新 • • 發佈:2019-02-15
如何使用border-radius屬性
下面是border-radius屬性最基本的使用方法。
border-radius:5px;/* 所有角都使用半徑為5px的圓角,此屬性為CSS3標準屬性 */
-moz-border-radius:5px;/* Mozilla瀏覽器的私有屬性 */
-webkit-border-radius:5px;/* Webkit瀏覽器的私有屬性 */
border-radius:5px4px3px2px;/* 四個半徑值分別是左上角、右上角、右下角和左下角 */
}
1.用border-radius畫圓
實心圓
畫實心圓的方法是高度和寬度相等,並且把border的寬度設為高度和寬度的一半。程式碼如下。
#circle{width:200px;
height:200px;background-color:#a72525;
-webkit-border-radius:100px;
}
空心圓
通過border-radius屬性畫空心圓和畫實心圓的方法差不多,只是border的寬度只能小於高度和寬度的一半。程式碼如下。
#circle{
width:200px;height:200px;background-color:#efefef;/*
Can be set to transparent */border:3px#a72525solid;
-webkit-border-radius:100px;
}