方法:1、用“width:內(nèi)圓直徑;height:內(nèi)圓直徑”樣式將div元素設(shè)置為正方形;2、用“border-radius:50%%u201d樣式將正方形設(shè)置為圓形;3、給圓形元素添加“border:粗細(xì)值 solid 顏色值”樣式實現(xiàn)環(huán)形圓即可。
本教程操作環(huán)境:windows10系統(tǒng)、css3&&html5版、dell g3電腦。
css3怎樣設(shè)置環(huán)形圓
在css中,可以先創(chuàng)建一個寬高相等的正方形div元素,然后利用border-radius屬性將正方形div設(shè)置成圓形,最后利用border屬性給這個圓形元素添加邊框即可。
示例如下:
<!doctype html><html lang=\”en\”><head> <meta charset=\”utf-8\”> <meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”> <meta http-equiv=\”x-ua-compatible\” content=\”ie=edge\”> <title>document</title> <style> div{ width:200px; height:200px; border-radius:50%; border:100px solid pink; } </style></head><body> <div></div></body></html>
輸出結(jié)果:
(學(xué)習(xí)視頻分享:css視頻教程)