CSS & CSS3 入門介紹 – round corner 圓角功能

CSS – Cascade Style Sheet

寫網頁直接embed style不就好了嗎? 也許在早期用文字編輯器的人都會有這種諗法,

為什麼要有一張SHEET裝好全部TAG的STYLE?

沒錯, 就是因為易於管理的關係. 試想想一個細小的頁面, TAG用不多當然很易修改,

但若一多起上來, 面對著一個龐大既專案, 每一個也要改則廢時失事, 找尋貼上的冗長功夫不是人人能忍受.

CSS的牽髮動全身既妙用, 用後你必能感受得到

為什麼會有CSS2.0, CSS3?

數字都只是代表STANDARD, 跟隨著W3C定立的Specification, 現今各大瀏覽器都會跟隨著STANDARD乖乖而開發,

不再給古時候的開發員一個亂世的混戰. 以前IE都只照顧著自己開發自家的STANDARD, 導致常常左顧右盼那些功能不支援,

又要特別的HACK才能做到一些效果…相信隨著IE6, 7慢慢遠去的時候, CSS, HTML STANDARD

才有正統的地位受各大瀏覽器的支援.

來到CSS3 standard, 比較新的技術, 你可以透過一些特別的設定加入圓角效果(Round Corner), 陰影,

連旋轉效果也可以做到也加入一些selector, nth-child select等功能, 相當方便. (不用設EVEN, ODD了, XD)

先來個基本解說, 在一般CSS的檔案中, 開一個出來你或許會看見…

.last_article{
    color: white;
}
#content{
    font-size: 10px;
}
div{
    padding-left:20px;
}

對應著以下HTML

2010-08-27
text

為什麼會有. (dot), # (sharp) 的分別? #content即對應DIV TAG中的ID ATTRIBUTE, 而 .last_article即對應CLASS

ATTRIBUTE. id在整個DOM HTML中最好設為唯一的值, 不要有其他給予TAG用上一樣的ID.

若用在某些代表一整塊BLOCK的時候, 我自己會選擇用id. 想為某幾個同類型的TAG加入風格時就用CLASS吧.

沒有加上. 或# 在前頭的話就代表著他給予全部div TAG 都有padding-left:20px的屬性.

接下來我想介紹CSS3新增的功能: 圓角 (Round Corner)

在現今的瀏覽器當中, 就算很緊隨W3C中形容的CSS3功能也好, 也未必一定全也可以實現得到.

在這裡我會介紹幾種主要會用到的瀏覽器, Internet Explorer, Firefox, Safari, Chrome, Opera.

除左前者的第9代瀏覽器, 其他都能對CSS3有較佳的支援, 他們有自己各自對應的名目,

Firefox, -moz 起頭, Safari, Chrome -webkit 起頭, 如果你想令你的網頁功能在各大瀏覽器表現一致,

有時候同一個功能你必須寫上三句才能做到…沒有統一的standard只會為難了開發人員呢.

首先說一說圓角的作法:

    .roundcorner{
         border: 1px solid black;
         -webkit-border-radius: 15px; //safari, chrome
         -moz-border-radius: 15px; //Firefox
         border-radius: 15px; //ie9, opera
         text-align:center;
     }

對應HTML

我們都是這樣成長的

效果(如果你正是用ie9, ff, chrome, safari, opera 應會看到border四個角變圓了, 若你的瀏覽器版本太舊也許還沒支援CSS3功能.):

我們都是這樣成長的

CSS3還有gradient, rotate 等等很好玩多變的功能,
抓著一張CHEATSHEET去試著各種功能吧~~~~

CSS3 Cheatsheet

以後再有機會會為大家介紹更多的CSS3功能~

CSS3

Your favorite photos collection

Latest tweets

Tags

CSS & CSS3 入門介紹 – round corner 圓角功能

CSS – Cascade Style Sheet

Add your comment