Atitti css3 新特性attilax總結

WBOY
發布: 2016-10-17 09:11:22
原創
992 人瀏覽過

Atitti css3 新特性attilax總結

 

 

圖片發光效果2

透明漸變效果2

文字描邊2

背景拉伸2

 

 

 

CSS3 選擇器(Selector)4

@Font-face 特性7

Word-wrap & Text-overflow 樣式9

Word-wrap9

Text-overflow10

文字渲染(Text-decoration) 描邊12

CSS3 的多列版面(multi-column layout)13

邊框和顏色(color, border)14

CSS3 的漸變效果(Gradient)15

線性漸變15

徑向漸層16

CSS3 的陰影(Shadow)與反射(Reflect)效果19

CSS3 的背景效果21

CSS3 的盒子模型23

CSS3 的 Transitions, Transforms 和 Animation30

Transitions30

Transform31

Animation33

 

圖片發光效果

text-shadow:#000 3px 0 0,#000 0 3px 0,#000 -3px 0 0,#000 0 -3px 0;  

可以設定每邊的發光效果,繁瑣些。 。

透明漸變效果

 background: radial-gradient(circle, rgba(230,251,12,1.00) 40%  , rgba(230,251,12,1.00) , rgba(230,251,12,* 的語法  

文字描邊

與該使用

文字渲染(Text-decoration) 描邊來做。 。發光效果雖然也可,單一效果不佳  

背景拉伸

background-size:100% 100%;  

 

CSS3 的 Transitions, Transforms 和 Animation

30 Transitions

30 transition-property

:用於指定過渡

效果 Transform

31 Animation

33

們來說說

Animation 吧。它可以說開闢了 CSS 的新紀元,讓 CSS 脫離了web

 

 

 

深入了解 CSS3 新功能.html

 

作者:: 綽號:老哇的爪子(:老哇的爪子  Akbar Al Rapanui 阿提拉克斯 阿克巴 阿爾 拉帕努伊 )  漢字名:

艾提拉(艾龍) 轉載請註明來源: http://www.cnblogs.com/attilax/ Atiend

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板