顯示具有 CSS 標籤的文章。 顯示所有文章
顯示具有 CSS 標籤的文章。 顯示所有文章

2011年11月13日 星期日

圓角化的效果

style="-moz-border-radius:8px;"


在CSS3中有一項新語法可以簡單實現區塊邊角可以圓角化的效果,不過現行的Internet Explorer尚不支援此語法喔。
所以大家快點拋棄Internet Explorer走向其他瀏覽器的環抱吧!! XD 不然可是看不到美美的網頁喔!!!

在各瀏覽器中的圓角語法不是一樣的寫法,所以每個圓角語法在CSS檔上要寫上三種來對應各個瀏覽器 XD|||


CSS3 (Opera)
Mozilla (FireFox)
WebKit (Safari、Google Chrome)
四邊圓角
border-radius
-moz-border-radius
-webkit-border-radius
左上圓角
border-top-left-radius
-moz-border-radius-topleft
-webkit-border-top-left-radius
右上圓角
border-top-right-radius
-moz-border-radius-topright
-webkit-border-top-right-radius
左下圓角
border-bottom-left-radius
-moz-border-radius-bottomleft
-webkit-border-bottom-left-radius
右下圓角
border-bottom-right-radius
-moz-border-radius-bottomright
-webkit-border-bottom-right-radius

基本的寫法:( 四邊圓角值15px )

 border-radius: 15px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 

除了可以用上表個別指定單一邊圓角值外也支援縮寫語法border-radius: [左上] [右上] [右下] [左下];

 左上5px、右上10px、右下15px、左下20px
 border-radius:5px 10px 15px 20px;
 -moz-border-radius:5px 10px 15px 20px;
 -webkit-border-radius:5px 10px 15px 20px;
 

透過這樣的CSS技術可以有效降低使用圖片量,增進讀取速度與節省網站空間。
雖然目前 Internet Explorer 8 尚未支援這個CSS語法,不過已經在下一個版本確定有支援此語法了,所以早點讓你的網站也活用此技術吧!

參考網址:
http://www.alan888.com/Discuz/thread-101652-1-1.html
http://wordpress.play-learn.net/wordpress/theme-hack/css_border-radius.html

長度(大小)單位

※長度(大小)單位:
在 CSS ,長度單位可以分為兩大類:絕對 (absolute) 單位以及相對 (relative) 單位。
相對單位包括:
px: pixels
em: em
ex: x 字母的高度
絕對單位包括:
in: 吋
cm: 公分
mm: 公厘
pt: points, 1 pt = 1/72 吋
pc: picas, 1 pc = 12 pt
如果沒有註明單位,那預設的單位是 px。

Word中的字體大小單位:pt