建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
CSS3使用實例分析
這篇文章主要介紹“CSS3使用實例分析”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS3使用實例分析”文章能幫助大家解決問題。
創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設，為客戶提供成都做網(wǎng)站、網(wǎng)站制作、網(wǎng)頁設計開發(fā)服務，多年建網(wǎng)站服務經(jīng)驗，各類網(wǎng)站都可以開發(fā)，成都品牌網(wǎng)站建設，公司官網(wǎng)，公司展示網(wǎng)站，網(wǎng)站設計，建網(wǎng)站費用，建網(wǎng)站多少錢，價格優(yōu)惠，收費合理。
1、前綴
-webkit-（chrome和Safari）、-moz-（firefox）、-ms-（IE）、-o-（opera）
2、邊框
圓角：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 */
3、背景 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%;
4、漸變
線性漸變： //默認從上到下、可以改變方向和角度 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); /* 標準的語法 */
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 : 字體文件在服務器上的相對或絕對路徑;}調用：font-family: 字體名稱;
7、2D變形 （transform: 帶前綴-ms- -webkit-）
8、3D變形
位移：translate3d(x,y,z)、translateZ(z)縮放：scale3d(x,y,z)、scaleZ(z)旋轉：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)跨列設置 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
關于“CSS3使用實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
網(wǎng)頁名稱：CSS3使用實例分析
當前地址：http://www.dlmjj.cn/article/igiihi.html
