5xRuby 實習心得: 2015.02.12 CSS學習 (CSS3 Styles)

背景顏色

Border-Radius
border4個角落的圓滑度

也可以單獨針對某個角落調整

上面框起來的那4行也可以寫成一行：
border-radius: 50px 10px 40px 20px;
border-radius的單位也可以使用百分比%

Box Shadow

Text Shadow
文字的陰影(IE9之前的瀏覽器不支援！)

Box Sizing
以前在設定div大小時還要自行去計算padding和border的寬度，但在CSS3提供了這個屬性可以改變預設的box model，用來改變計算element的寬度和高度的方式，只要把box-sizing設為border-box，那設定的寬和高就會是在螢幕上所見到的寬和高，不會比預想的還要大。
有三個值可以設定

content-box：這是預設的數值，寬度和高度只包含content
padding-box：設定的寬度和高度包含padding和content
border-box：設定的寬度和高度包含padding、border和content

例：

.test1的width=300px(padding+content+border)
.test2的width=300px(padding+content+border)
.test3的width=300px(content)+20px(左右border)=320px
.test4的width=300px(content)+50px(左右padding)+10px(左右border)=360px

.test1的width=300px(padding+content+border)
.test2的width=300px(padding+content+border)
.test3的width=300px(content)+50px(左右padding)+20px(左右border)=370px
.test4的width=300px(content)+50px(左右padding)+10px(左右border)=360px

.test1的width=300px(padding+content)+20px(左右border)=320px
.test2的width=300px(padding+content)+10px(左右border)=310px
.test3的width=300px(content)+50px(左右padding)+20px(左右border)=370px
.test4的width=300px(content)+50px(左右padding)+10px(左右border)=360px

多重背景
CSS3可以在一個elements中設定多個背景
使用方式：