本篇文章為大家展示了使用border-radius屬性怎么給元素添加圓角邊框,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
為弓長嶺等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及弓長嶺網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站建設(shè)、弓長嶺網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
border-radius:10px; /* 所有角都使用半徑為10px的圓角 */
border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角,順時針 */
不要以為border-radius的值只能用px單位,你還可以用百分比或者em,但兼容性目前還不太好。
實心上半圓:
方法:把高度(height)設(shè)為寬度(width)的一半,并且只設(shè)置左上角和右上角的半徑與元素的高度一致(大于也是可以的)。
div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半徑至少設(shè)置為height的值*/ }
實心圓:
方法:把寬度(width)與高度(height)值設(shè)置為一致(也就是正方形),并且四個圓角值都設(shè)置為它們值的一半。
如下代碼:
div{ height:100px;/*與width設(shè)置一致*/ width:100px; background:#9da; border-radius:50px;/*四個圓角值都設(shè)置為寬度或高度值的一半*/ }
完整代碼
<!doctype html> <html> <head> <meta charset="utf-8"> <title>border-radius</www.dztcsd.com/title> <style type="text/css"> div.circle{ height:100px;/*與width設(shè)置一致*/ width:100px; background:#9da; border-radius:50px;/*四個圓角值都設(shè)置為寬度或高度值的一半*/ } /*任務(wù)部分*/ div.semi-circle{ height:100px; width:50px; background:#9da; border-radius:?; } </style> </head> <body> <div class="circle"> </div> <br/> <!--任務(wù)部分--> <div class="semi-circle"> </div> </body> </html>
上述內(nèi)容就是使用border-radius屬性怎么給元素添加圓角邊框,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站標(biāo)題:使用border-radius屬性怎么給元素添加圓角邊框
網(wǎng)站網(wǎng)址:http://chinadenli.net/article10/gjesgo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計公司、服務(wù)器托管、ChatGPT、
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)