CSS3使用實例分析

這篇文章主要介紹“CSS3使用實例分析”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“CSS3使用實例分析”文章能幫助大家解決問題。

1、前綴

-webkit-（chrome和Safari）、-moz-（firefox）、-ms-（IE）、-o-（opera）

2、邊框

圓角：border-radius: 5px 4px 3px 2px; /* 順時針 */ 
陰影：box-shadow: X軸偏移量 Y軸偏移量
[陰影模糊半徑] [陰影擴(kuò)展半徑] [陰影顏色] [投影方式];
/* 默認(rèn)外陰影*/外陰影 ：box-shadow:4px 2px 6px #333333;
內(nèi)陰影： 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重復(fù)
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 */

3、背景 background

大?。?nbsp;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%;

4、漸變

線性漸變： //默認(rèn)從上到下、可以改變方向和角度 
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); /* 標(biāo)準(zhǔn)的語法 */

徑向漸變： 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); /* 標(biāo)準(zhǔn)的語法 */

5、文本效果

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

6、字體

@font-face { font-family : 字體名稱; src : 字體文件在服務(wù)器上的相對或絕對路徑;}

調(diào)用：font-family: 字體名稱;

7、2D變形 （transform: 帶前綴-ms- -webkit-）

8、3D變形

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

9、過渡 （transition: 帶前綴-webkit-）

10、動畫 (-webikt-)

【例】@keyframes myfirst、@-webkit-keyframes myfirst div{ animation: myfirst 5s linear 2s infinite alternate; -webkit-animation: myfirst 5s linear 2s infinite alternate;}

11、多列布局

多列布局 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)跨列設(shè)置 column-span: none | all

12、CSS3外輪廓屬性

outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

outline:2px solid red;outline-offset:15px;

13、盒子模型

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

14、自由縮放屬性

resize：none | both | horizontal | vertical | inherit

關(guān)于“CSS3使用實例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。