首頁 > web前端 > css教學 > 10個常用的CSS3知識分享

10個常用的CSS3知識分享

yulia
發布: 2018-09-11 16:10:22
原創
1315 人瀏覽過

隨著時代的發展,前端知識也一直在更新,目的是讓使用者體驗更好,工作效率變高。 CSS3的出現,讓我們可以透過簡單的方式,做出更多酷炫的效果,工作中整理了10個常用的CSS3屬性,歡迎參考。

1、文字效果

陰影:text-shadow:X偏移Y偏移模糊程度陰影顏色;text-shadow: 5px 5px 5px #FF0000; 文字溢出:text-overflow: ellipsis; overflow:hidden; white-space:nowrap;

2、字型

@font-face { font-family : 字型名稱; src : 字型檔案在伺服器上的相對或絕對路徑;}
呼叫:font-family: 字型名稱;

3、3D變形

位移:translate3d(x,y,z)、translateZ(z)縮放:scale3d( x,y,z)、scaleZ(z)旋轉:rotate3d(x,y,z,angle)、rotateZ(angle)

4、多列佈局

多列佈局columns: (column-width) || (column-count); column-width: auto | (length); column-count:auto | (integer);列間距column-gap: normal || (length)列表邊框column-rule :(column-rule-width)|(column-rule-style)|(column-rule-color)跨列設定column-span: none | all

#5、盒子模型

# box-sizing: content-box | border-box | inherit

6、自由縮放屬性

resize:none | both | horizo​​ntal | vertical | inherit

#7、前綴

-webkit-(chrome和Safari)、-moz-(firefox)、-ms-(IE)、-o-(opera)

#8、邊框

#圓角:border-radius: 5px 4px 3px 2px; /* 順時針*/
陰影:box-shadow: X軸偏移量Y軸偏移量
[陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
/* 預設外陰影*/外陰影:box-shadow:4px 2px 6px #333333;
內陰影:box-shadow:4px 2px 6px #333333 inset;
多陰影: box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
邊界圖片:border-image: 圖片 像素順時針延伸方式(repeat重複
round平鋪stretch 拉伸) border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 round; /* Opera */

9、背景background

大小: background-size: auto | <長度值> | <百分比> | cover | contain 原點: background-origin : border-box | padding-box | content-box;

裁切: background-clip : border-box | padding-box | content-box | no-clip 多重背景: background : [background-color] | [background-image] |
[background-position][/background-size] | [background-repeat] |
[background -attachment] | [background-clip] | [background-origin],...
【例】background:url(logoindex.png) no-repeat left top/75% 50% , url(logoindex.png) no-repeat right bottom/50% 45%;

10、漸變

線性漸變: //預設從上到下、可以改變方向和角度
background: -webkit- linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 標準的語法*/
徑向漸層: background: -webkit-radial-gradient(red, green, blue ); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: radial-gradient(red, green, blue); /* 標準的語法*/

以上是10個常用的CSS3知識分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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