[ 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
 
 



相關文章

滾動到此時執行動畫 Animate On Scroll   今天要介紹 AOS Animate On Scroll Library,他是一款蠻好手上的滾動式動畫的資料庫,對於有需求要自訂義動畫的人也相當方便。我覺得比較值得一提的是當滾輪滾回...
判斷手機系統 為 iOS 或是 Android 今天要和大家分享一個JS語法,這個語法可以判斷手機的系統,在我們寫網頁的時候時常會遇到 iOS 和 Android 手機頁面長的不同的困擾,這時候就會覺得 iOS 很麻煩為什麼要這麼特立獨行,但是作為...
WordPress對應模板 每個主題基本上都會有這些模板,有些主題可能會有特殊的模板。當你需要修改模板的時候卻不知道從何改起,這篇文章可以幫助你找到你要修改的頁面是哪個模板。   ▲ 模板在哪裡? 外觀 → 主題...
CSS和CSS3的差別?   怎麼說呢? CSS3和CSS本身不應該有區別,因為他們是同一個東西,CSS3是CSS的進化版,CSS3只是一個更新的版本還是有CSS為基底的,所以不可能說跳過CSS學CSS3...