六角學院|CSS3技巧
CSS3 圓弧效果
border-radius: 50%;
border-radius: 50px(左上) 0(右上)0(右下)0(左下)
CSS3 漸層效果
background: linear-gradient(#00644b,#009772);
( ___ , ___ )預設為上到下進行渲染.
如果想要從左邊到右邊進行渲染:( 方向, ___ , ___ );
但由於CSS3還是一個很新的技術,故有些瀏覽器並不支援,
必須加入前綴詞設定:
background: -webkit-linear-gradient(left, ____, ____); /* For Safari 5.1 to 6.0 */
https://www.w3schools.com/css/css3_gradients.asp
web for chrome;
o for opera;
mom for firefox;
CSS3 陰影效果
box-shadow: x軸 y軸 柔焦 柔焦顏色;
box-shadow: 10px 10px 10px pink;
使用 can I use 查詢 HTML、CSS 瀏覽器兼容度
https://caniuse.com
使用 Statcounter 瀏覽各國瀏覽器趨勢
http://gs.statcounter.com
border-radius: 50%;
border-radius: 50px(左上) 0(右上)0(右下)0(左下)
CSS3 漸層效果
background: linear-gradient(#00644b,#009772);
( ___ , ___ )預設為上到下進行渲染.
如果想要從左邊到右邊進行渲染:( 方向, ___ , ___ );
但由於CSS3還是一個很新的技術,故有些瀏覽器並不支援,
必須加入前綴詞設定:
background: -webkit-linear-gradient(left, ____, ____); /* For Safari 5.1 to 6.0 */
https://www.w3schools.com/css/css3_gradients.asp
web for chrome;
o for opera;
mom for firefox;
CSS3 陰影效果
box-shadow: x軸 y軸 柔焦 柔焦顏色;
box-shadow: 10px 10px 10px pink;
使用 can I use 查詢 HTML、CSS 瀏覽器兼容度
https://caniuse.com
使用 Statcounter 瀏覽各國瀏覽器趨勢
http://gs.statcounter.com
评论
发表评论