border-radius是向元素添加圓角邊框的方法
border-radius:10px; /* 所有角都使用半徑為10px的圓角 */
border-radius: 5px 4px 3px 2px; /* 四個(gè)半徑值分別是左上角、右上角、右下角和左下角,順時(shí)針 */
不要以為border-radius的值只能用px單位,你還可以用百分比或者em,但兼容性目前還不太好。
實(shí)心上半圓:
方法:把高度(height)設(shè)為寬度(width)的一半,并且只設(shè)置左上角和右上角的半徑與元素的高度一致(大于也是可以的)。
- div{
- height:50px;/*是width的一半*/
- width:100px;
- background:#9da;
- border-radius:50px 50px 0 0;/*半徑至少設(shè)置為height的值*/
- }
實(shí)心圓:
方法:把寬度(width)與高度(height)值設(shè)置為一致(也就是正方形),并且四個(gè)圓角值都設(shè)置為它們值的一半。
如下代碼:
- div{
- height:100px;/*與width設(shè)置一致*/
- width:100px;
- background:#9da;
- border-radius:50px;/*四個(gè)圓角值都設(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;/*四個(gè)圓角值都設(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>
以上就是小編為大家?guī)?lái)的border-radius是向元素添加圓角邊框的方法的全部?jī)?nèi)容了,希望對(duì)大家有所幫助,多多支持我們~
上一篇:html 基于 canvas 實(shí)現(xiàn)的一個(gè)截圖小demo
欄 目:CSS/HTML
下一篇:HTML中相似的標(biāo)簽和屬性的區(qū)別詳解
本文標(biāo)題:border-radius是向元素添加圓角邊框的方法
本文地址:http://mengdiqiu.com.cn/a1/CSS_HTML/9594.html
您可能感興趣的文章
- 04-02內(nèi)嵌樣式css,內(nèi)嵌樣式表,內(nèi)部樣式表,外部樣式表中優(yōu)先級(jí)最高的
- 01-10XHTML中的常用標(biāo)簽整理
- 01-10用Meta標(biāo)簽代碼讓360雙核瀏覽器默認(rèn)極速模式不是兼容模式
- 01-10Html如何設(shè)置橫向?qū)Ш浇Y(jié)構(gòu)
- 01-10dns-prefetch是什么 前端優(yōu)化:DNS預(yù)解析提升頁(yè)面速度
- 01-10htm初學(xué)筆記(新手必看)
- 01-10向div元素添加圓角邊框的實(shí)現(xiàn)方法
- 01-10HTML基本概念詳解
- 01-10淺談HTML空鏈接的作用
- 01-10淺談HTML中的標(biāo)記


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 04-02表格樣式css樣式,css樣式表單
- 04-02好看的字體樣式css,好看的字體樣式圖
- 04-02分頁(yè)樣式css,分頁(yè)樣式j(luò)q
- 04-02分頁(yè)樣式css,分頁(yè)樣式欄里用來(lái)定義首
- 04-02css樣式的引入,css樣式怎么引入
- 04-02css滾動(dòng)條樣式,css滾動(dòng)條的樣式
- 04-02css樣式引入方式有幾種,網(wǎng)頁(yè)引入css樣
- 04-02html中加入css樣式的簡(jiǎn)單介紹
- 04-02vue中的css樣式布局,vue添加css樣式
- 04-02內(nèi)嵌樣式css,內(nèi)嵌樣式表,內(nèi)部樣式表
隨機(jī)閱讀
- 08-05DEDECMS點(diǎn)擊主欄目默認(rèn)顯示第一個(gè)子欄
- 08-05dedecms織夢(mèng)模板全站調(diào)用收藏?cái)?shù)的方法
- 01-10vue實(shí)現(xiàn)分頁(yè)加載效果
- 01-11常用的HTML富文本編譯器UEditor、CKEdi
- 08-05織夢(mèng)dedecms首頁(yè)調(diào)用縮略圖為背景
- 08-05dedecms織夢(mèng)模板編輯文檔的同時(shí)自動(dòng)更
- 01-10C語(yǔ)言打印楊輝三角示例匯總
- 01-10C++ 類訪問(wèn)控制的條件總結(jié)
- 01-10C++實(shí)現(xiàn)將數(shù)組中的值反轉(zhuǎn)
- 01-10bat批處理徹底隱藏文件的方法(使用