[ CSS教學 ] CSS3增加了哪些語法?如何使用?

標籤: , , , , , ,

 
上篇前言跟大家說明CSS和CSS3的差別是什麼?答案是他們是密不可分的。那麼要如何使用CSS3新增的語法呢?這邊就來跟大家介紹一下CSS3增加了哪些語法以及它的使用方式喔~
 
 
1. box-shadow
作用:替一個區塊(div/block)增加陰影。
用法:box-shadow: x y blur spread color inset;
解釋:x = 上/下 (水平移動)
y = 左/右 (垂直移動)
blur = 模糊/清楚
spread = 分散/凝聚
color=顏色
inset = 內陰影
範例:

box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;

 
 
2. border-color
作用:設定上下左右邊框的顏色。
用法:border-color:color color color color;
解釋:color依序為上右下左。
範例:

border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);

 
 
3. text-shadow
作用:文字的陰影。
用法:text-shadow:x y blur color;
解釋:x = 上/下 (水平移動)
y = 左/右 (垂直移動)
blur = 模糊/清楚
color=顏色
範例:

text-shadow:0px 0px 15px #FF37FD;

 
 
4. text-overflow
作用:使一區域內的文字切斷。
用法:text-overflow: clip / ellipsis;
解釋:css3
可以看到使用clip文字會直接被切斷,但使用ellipsis文字會以”…”為斷點。
 
 
5. border-radius
作用:區塊圓角。
用法:border-radius:value;
解釋:value = 數字px。
 
 
6. opacity
作用:透明度。
用法:opacity:value;
解釋:value=0-1,可以是小數 (ex:0.5)。
 
 
7. box-sizing
作用:使其用了padding/margin/border,元素的寬度也不會改變。
用法:box-sizing:content-box / border-box / initial / inherit;
解釋:上方為原本的樣子(content-box)。
下方為使用border-box後的樣子,維持原本的寬度,不受padding/margin/border的影響。
範例:css3
 
 
8. resize
作用:使一個區塊可以隨意縮放。
用法:resize: none / both / horizontal / vertical;
解釋:none=不可縮放。
both=可以任意縮放。
horizontal=水平拉長拉短。
vertical=垂直拉長拉短。
 
 
9. background-clip
作用:裁切背景圖片。
用法:background-clip: border-box / padding-box / content-box;
解釋:border-box = 初始值(沒有改變的)。
padding-box=刪除padding部分的背景。
content-box=刪除content部分(有內容的地方不會被刪除)的背景。
範例:css3
 
 
以上就是CSS3有新增的語法我選一些來解釋它的作用和用法,這幾個也是比較常用好用的語法。以上就是今日的CSS3語法教學,有問題歡迎討論~
 
 
提醒各位鄉親們XD 在使用CSS語法的時候要記得注意他所支援的瀏覽器版本,不然寫得好辛苦結果沒辦法使用就比較麻煩囉!基本上Chrome都會支援,Firefox 和 IE 就要看一下,有時候呢…iOS也會有一些問題哈,總之在製作的時候要多多測試喔!
資料參考:W3C
 
 



相關文章

CSS Animation 如何用CSS來製作動畫的效果? (下集)... 今天要繼續跟大家介紹如何使用 Animation 的屬性,沒有看過上集的你 請點我看上集 ,那麼有看過上集的人我今天就要繼續介紹囉! ▲ 介紹內容 1. animation 可以製作什麼樣的效...
CSS selector 選擇器     今天要介紹的主題是CSS選擇器,很多時候我們會寫css但是對其選擇器代表的意思卻不是非常了解,我們可能知道  "." 代表 class 或是 "#" 代表 id ,但...
Loading 製作載入中畫面 (8/9更新:Safari 載入問題)...   此篇文章要教大家如何製作 Loading 畫面,在瀏覽網站的時候有時候會看到有些網站有 "過場畫面" ,當整個網頁載好時才會讓使用者看到完整的畫面,這樣有什麼好處呢?可以讓網頁更有...
CSS和CSS3的差別?   怎麼說呢? CSS3和CSS本身不應該有區別,因為他們是同一個東西,CSS3是CSS的進化版,CSS3只是一個更新的版本還是有CSS為基底的,所以不可能說跳過CSS學CSS3...