CSS3初識

CSS3幫助手冊

CSS3一直在持續進化中，我們可以透過幫助文件去學習CSS3,下面把常用的文件羅列一下：

CSS3簡介

CSS3為我們提供了很多讓人興奮的新樣式,但是由於瀏覽器的相容性問題,所以並不是所有的瀏覽器都能夠使用
不過這並不影響我們學習以及使用它

字首:

• 瀏覽器廠商在實現CSS3的效果時,有的還有的還在測試階段,為了保證顯示效果,我們在使用某些屬性的時候需要新增額外的字首

• 舉個例子:我要使用屬性xxx

  • -ms-xxx:ie瀏覽器

  • -moz-xxx:FireFox瀏覽器

  • -o-xxx:Opera瀏覽器

  • -webkit-xxx:Chrome以及Safari

Trident核心(IE)： 字首為 -ms
Gecko核心(FireFox)： 字首為 -moz
Presto核心(Opera)： 字首為 -o
Webkit核心(Chrome,Safari)： 字首為 -webkit

核心知識點

CSS3的所有樣式都分為模組，其中最重要的是

• 選擇器

• 框模型

• 背景和邊框

• 文字效果

• 2D/3D 轉換

• 動畫

• 多列布局

• 使用者介面

CSS中出現的新屬性

selection

• 語法：

  • 選中時的樣式

  • 只能設定的屬性有background-color,color,text-shadow

E::selection

placeholder

該屬性處於測試階段，需要配合瀏覽器字首使用

• 語法：

  • 設定input標籤placeholder屬性的顯示顏色

E::selection

• 示例程式碼：

input::-webkit-input-placeholder {    color: #999;}input:-ms-input-placeholder { // IE10+    color: #999;}input:-moz-placeholder { // Firefox4-18
    color: #999;}
input::-moz-placeholder { // Firefox19+    color: #999;}

顏色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以設定顏色值的透明度，跟opacity相比，它們不具有繼承性，即不會影響子元素的透明度。

• RGBA

  • Red：0-255

  • Green：0-255

  • Blue：0-255

  • Alpha：0-1（小數）

  • 注意，不使用A那麼認為沒有透明度

    color:RGBA(100,100,100,0.3);    color:RGB(100,100,100);

• HSLA

  • Hue(色調):0-360

  • Saturation(飽和度):0-100%

  • Lightness(亮度):0-100%

  • Alpha(透明度):0-1（小數）

color: hsla(308, 85%, 58%, 1);
color: hsl(308, 85%, 58%);

• 取色：

  • 使用PS的拾色器即可

• 透明度說明：

  • opacity只能針對整個盒子設定透明度，子盒子及內容會繼承父盒子的透明度 ，他是作為CSS的屬性來使用的

  • transparent始終完全透明，他是作為顏色的取值來使用color:transparent

• 適用範圍：

  • 所有可以使用顏色的地方，都能夠使用RGBA 以及HSLA

作者：Rella7
連結：