border-radius百分比屬性值參考值什麼
關於border-radius的基本用法可以參閱以下兩篇文章。
(1).CSS3 border-radius一章節。
(2).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:420px; height:220px; background-color:#999; border-radius:20% 30% 40% 50%; margin:0px auto; } </style> </head> <body> <div></div> </body> </html>
矩形有四個角,每個角對於圓角的設定可以有兩個引數,一個是設定水平半徑,一個是設定垂直半徑。
上面的程式碼中,每一個角只是用了一個引數,那麼那麼就同時作用域水平和垂直半徑。
那麼20%就是左上角垂直高和水平寬的百分之二十。
當然我們也可以分開各自設定,程式碼如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>CSS學習-螞蟻部落</title> <style type="text/css"> div{ width:420px; height:220px; background-color:#999; border-radius:20% 30% 40% 50% / 30% 50% 40% 50%; margin:0px auto; } </style> </head> <body> <div></div> </body> </html>
上面的程式碼中,左上角圓弧(這裡已經是橢圓弧)水平半徑是20%乘以420,垂直半徑是30%乘以220。
相關文章
- tabIndex屬性值為負數的作用是什麼Index
- BackgroundImageLayout屬性值
- C#反射設定屬性值和獲取屬性值C#反射
- CSS 屬性賦值CSS賦值
- 為什麼列印物件,點開檢視某屬性有值,但是直接列印無值物件
- flex佈局屬性快速參考Flex
- 修改追加屬性的值
- HTML 布林屬性值HTML
- ajax readystate 屬性值
- js中為什麼值型別可以使用方法和屬性JS型別
- JavaScript 獲取 checked 屬性值JavaScript
- javascript如何獲取屬性值JavaScript
- CSS border屬性預設值CSS
- jquery設定href屬性值jQuery
- jquery改變元素屬性值jQuery
- 理解CSS屬性值語法CSS
- js如何獲取給定屬性的屬性值JS
- 詳情屬性圖示設計參考
- margin 百分比 參考物件物件
- <a>為空使用href屬性值填充
- 數值常用的屬性和方法
- checkbox name屬性值注意點
- C# 類相同屬性賦值C#賦值
- HTML id屬性值不能重複HTML
- 物件屬性值賦給變數物件變數
- css的border屬性預設值CSS
- css屬性值語法解讀CSS
- 在url中通過屬性名獲取屬性值
- javascript獲取物件直接量中的屬性和屬性值JavaScript物件
- IOS學習筆記(頁面傳值:屬性傳值,協議代理傳值,閉包傳值)iOS筆記協議
- VB.Net中文教程(7) Me參考值 (轉)
- textarea 多行文字域 type 屬性值
- 為 protocol 中屬性新增預設值Protocol
- checked屬性值是true還是checked
- padding屬性值的順序padding
- jQuery如何設定元素的屬性值jQuery
- css匹配具有指定屬性值的元素CSS
- JavaScript修改連結a的href屬性值JavaScript