小編給大家分享一下css怎樣把div修飾成圓,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
css把div修飾成圓的方法:首先新建一個html文件;然后在body標簽內輸入“<div class="circle"></div>”;最后在head表里添加style標簽,并添加“border-radius”屬性即可。
css把div修飾成圓
1、打開代碼編輯器,新建一個html文件,寫上基本的結構
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
2、在body標簽內輸入:<div class="circle"></div>,這里的div就是用于畫圓形的標簽。
<body> <div class="circle"></div> </body>
3、在head表里添加style標簽,輸入下面代碼
<style> .circle{ width: 200px; height: 200px; border-radius: 100px; background-color: #1EFD0C; } </style>
5、保存好代碼,打開瀏覽器即可看見圓形。
實現原理:設置寬高相同,再設置圓角為寬高的一半,更方便的做法是直接設置圓角為50%。
看完了這篇文章,相信你對“css怎樣把div修飾成圓”有了一定的了解,如果想了解更多相關知識,歡迎關注創新互聯行業資訊頻道,感謝各位的閱讀!
本文名稱:css怎樣把div修飾成圓-創新互聯
轉載注明:http://www.yijiale78.com/article10/pgedo.html
成都網站建設公司_創新互聯,為您提供域名注冊、關鍵詞優化、App開發、微信公眾號、自適應網站、網站維護
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯