(一)寫在前面:
常見比較周全的寫法是寫三行,保證每一種瀏覽器都看得到。
主要語法:border-radius: 圓角半徑 px ;
以圓角半徑 10px 舉例。
border-radius: 10px; ➜ 適用瀏覽器:① IE 6以上 ② Opera
-moz-border-radius: 10px; ➜ 適用瀏覽器:① Firefox
-webkit-border-radius: 10px; ➜ 適用瀏覽器:① Safari ② Chrome
(二)實作效果:依然以圓角半徑 10px 舉例,可做出多種組合。
為了讓語法看起來不繁複,以下只以border-radius實作,如果看不到效果的補全另兩行即可。
讓一個角圓角化,先設上下邊,再管左右角,設兩角就寫兩行,三角就寫兩行語法。
四邊圓角 | border-radius: 10px; |
左上圓角 | border-top-left-radius: 10px; |
右上圓角 | border-top-right-radius: 10px; |
左下圓角 | border-bottom-left-radius: 10px; |
右下圓角 | border-bottom-right-radius: 10px; |
上邊圓角 | ⑴ border-top-left-radius: 10px; ⑵ border-top-right-radius: 10px; |
下邊圓角 | ⑴ border-bottom-left-radius: 10px; ⑵ border-bottom-right-radius: 10px; |
左邊圓角 | ⑴ border-top-left-radius: 10px; ⑵ border-bottom-left-radius: 10px; |
右邊圓角 | ⑴ border-top-right-radius: 10px; ⑵ border-bottom-right-radius: 10px; |
對邊圓角 | ⑴ border-top-left-radius: 10px; ⑵ border-bottom-right-radius: 10px; |
對邊圓角 | ⑴ border-top-right-radius: 10px; ⑵ border-bottom-left-radius: 10px; |
(二)其他說明:
影響圓角的當然還有圓角半徑大小,這個看個人需求了,可大可小。
不管多大多小,還是以區塊的大小為主,不然就看不出效果了。
另外,圓角可和 區塊陰影、框線 相結合,這三者可一起用也可單一用,會做出不同的質感。
0 Comments:
張貼留言