CSS3 border-radius百分數
border-radius屬性的基本用法可以參閱CSS3 border-radius一章節。
下面介紹一下以百分比方式設定圓角效果特別注意的地方,需要的朋友可以做一下參考。
繪製一個圓形非常的簡單,看如下程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div { width:100px; height:100px; background:green; border-radius:50px; } </style> </head> <body> <div></div> </body> </html>
上面的程式碼繪製了一個綠色的圓形。
非常的簡單,首先建立一個正方形,然後將圓角的半徑設定為正方形寬度或者高度的一半即可。
border-radius屬性值為百分比同樣可以實現我們的要求,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div { width:100px; height:100px; background:green; border-radius:50%; } </style> </head> <body> <div></div> </body> </html>
設定屬性值為百分之五十同樣可以實現效果,有沒有想過為什麼是百分之50%,如果百分之六十呢。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div { width:100px; height:100px; background:green; border-radius:60%; } </style> </head> <body> <div></div> </body> </html>
設定百分之六十也是能夠繪製一個圓形,下面對此做一下介紹。
[CSS] 純文字檢視 複製程式碼border-radius:60%;
上面的程式碼是設定四個角的水平半徑和垂直半徑都是對應的寬和高的百分之六十。
很明顯在水平方向和垂直方位相鄰兩個角的半徑之和大於div的寬度和高度,這很明顯是不合理的。
這個時候,渲染引擎會同時均勻縮放水平和垂直方位的半徑,直到恰好適合div的寬度或者高度。
其實對於非百分比的數字也是同樣的道理,上面僅僅是以百分比做個引子而已:
[CSS] 純文字檢視 複製程式碼div { width:100px; height:100px; background:green; border-radius:60px; }
同樣也會進行縮小,以恰好適合div的寬度或者高度。
相關文章
- css3 border-radiusCSSS3
- CSS border-radius 百分比CSS
- CSS3 border-radius帶邊框CSSS3
- border-radius以百分比設定圓角
- border-radius百分比屬性值參考值什麼
- CSS border-radiusCSS
- JavaScript將小數轉換為百分數JavaScript
- CSS border-radius 帶邊框CSS
- ios使用border-radius時失效iOS
- Excel表格怎麼將小數轉換成百分數?Excel
- MySQL百分位數計算(優化版)MySql優化
- Java計算百分比保留整數Java
- MySQL百分位數計算(再優化版)MySql優化
- Java 兩個整數相除保留兩位小數,將小數轉化為百分數Java
- c++格式化輸出(百分數,小數,設定寬度)C++
- mysql三表連線查詢以及百分數排序MySql排序
- Java數字、貨幣值和百分數等的格式化處理Java
- [譯] CSS border-radius 還可以這麼用?CSS
- border-radius元素overflow:hidden失效問題
- 瞭解CSS/CSS3原生變數varCSSS3變數
- MySQL百分位數計算(第三次優化)MySql優化
- line-height 百分比和數字的區別
- css3動畫實現數字動態增加CSSS3動畫
- 益百分 開篇
- border-radius繪製圓形圖案程式碼例項
- Canvas百分比動畫Canvas動畫
- C++——百分率C++
- margin系列之百分比
- Bison中百分號的作用
- CSS3動畫實現3D倒數計時效果CSSS3動畫3D
- css3實現的賽道倒數計時奔跑效果CSSS3
- excel自動求百分比公式 excel怎麼輸入百分比公式Excel公式
- MySQL百分比顯示和顯示前百分之幾的方法MySql
- 百分點全新發布智慧政府決策系統,賦能數字政府建設
- CSS3CSSS3
- 漲姿勢!CSS3動畫幀數科學計演算法CSSS3動畫演算法
- margin 百分比 參考物件物件
- Js 百分比進度條JS