CSS border-radius畫圓
阿新 • • 發佈:2019-01-22
1.CSS畫實心圓
長度和寬度相等,border-radius設定為長度(寬度)的一半。
#circle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px; }
2.CSS畫空心圓
和畫實心圓方法類似,只是將border大小設定為小於長度(寬度)的一半。
#circle { width: 200px; height: 200px; background-color: #efefef; /* Can be set to transparent */border: 3px #a72525 solid; -webkit-border-radius: 100px; }
3.CSS畫虛線圓
#circle { width: 200px; height: 200px; background-color: #efefef; /* Can be set to transparent */ border: 3px #a72525 dashed; -webkit-border-radius: 100px 100px 100px 100px; }
4.CSS畫(左)半圓
#quartercircle { width: 100px; height: 200px; background-color: #a72525; -webkit-border-radius: 200px 0 0 200px; }
5.CSS畫1/4圓
#quartercircle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 200px 0 0 0; }