CSS3提供了一個(gè)新的屬性集合，用這幾個(gè)屬性可以嵌入圖片形式的邊框。這樣，邊框就可以自定義了。
1.border-image-source//引入背景圖片地址
2.border-image-slice//切割引入背景圖片
3.border-image-width//邊框圖片的寬度
4.border-image-repeat//邊框背景圖片的排列方式
5.border-image-outset//邊框背景向外擴(kuò)張
6.border-image//上面五個(gè)屬性的簡(jiǎn)寫(xiě)方式
首先，用Photoshop軟件分析一下這個(gè)標(biāo)準(zhǔn)九宮格的總體大小和每個(gè)格子的大小。
最終得出圖片總大小為81px正方形，四個(gè)角的大小為27px的正方形，其余五個(gè)角也是27px。那么
div {
margin-left:50px;
margin-top:50px;
width: 400px;
height: 400px;
background:green;
border-image-source: url(border.png);
border-image-width: 27px; //紅色方格的大小
border-image-slice: 27; //保證邊角只切一個(gè)方格（紅色方格）
border-image-outset: 27px; //該邊框包圍在div的外部
border-image-repeat: round; //除四角之外，中間部分的顯示方式}
四個(gè)角設(shè)定好之后，我們要設(shè)定四個(gè)變的顯示排列方式。使用border-image-repeat屬性，有四個(gè)值提供使用
stretch指定用拉伸方式填充邊框背景圖。默認(rèn)值。
repeat指定用平鋪方式來(lái)填充邊框背景圖。當(dāng)圖片碰到邊界時(shí)，如果超過(guò)則被截?cái)唷?/p>
round指定用平鋪方式來(lái)填充邊框背景圖。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的大小，直至正好可以鋪滿整個(gè)邊框。
space指定用平鋪方式來(lái)填充邊框背景圖。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的之間的間距，直至正好可以鋪滿整個(gè)邊框。
//拉伸方式填充，當(dāng)然，通過(guò)上右下左設(shè)置四個(gè)邊均可
border-image-repeat:stretch;
//平鋪填充，超過(guò)則被截?cái)?/p>
border-image-repeat:repeat;
//平鋪填充，動(dòng)態(tài)調(diào)整圖片大小直至鋪滿
border-image-repeat:round;
//平鋪填充，動(dòng)態(tài)調(diào)整圖片的間距直至鋪滿
border-image-repeat:space;
//另一個(gè)按鈕的小例子
div{
margin-left:50px;
margin-top:50px;
width: 200px;
height: 40px;
border-image-source: url(button.png);
border-image-width: 10px;
border-image-outset:10px;
border-image-slice: 10 fill;}
簡(jiǎn)寫(xiě)和版本
//border-image簡(jiǎn)寫(xiě)格式很簡(jiǎn)單，具體如下：
border-image：<‘border-image-source’>||<‘border-image-slice’>[/<‘border-image-width’>|/<‘border-image-width’>?/<‘border-image-outset’>]?||<‘border-image-repeat’>
//以上是手冊(cè)上摘錄的，轉(zhuǎn)換成實(shí)際格式如下：
margin-left:50px;
margin-top:50px;
width: 400px;
height: 400px;
background:green;
border-image: url(border.png) 27/27px/27px round;//兼容加上前綴
-webkit-border-image:url(border.png) 27/27px round;
-moz-border-image:url(border.png) 27/27px round;
-o-border-image:url(border.png)27/27px round;
border-image:url(border.png) 27/27px round
CSS邊框樣式：CSS3(border-image-*)邊框圖片效果最先出現(xiàn)在南通力行網(wǎng)絡(luò)科技有限公司。
]]>CSS border 屬性允許您指定元素邊框的樣式、寬度和顏色。
CSS邊框 border
1.設(shè)置邊框樣式：
border-style:樣式；
可選的樣式有：none 無(wú)邊框 ，dotted 虛線邊框 ，dashed 虛線邊框 ，solid 實(shí)線邊框 ，double 雙邊框 ，groove 凹槽邊框， ridge 壟狀邊框 ，inset 嵌入邊框 ，outset 外凸邊框 ，hidden 隱藏邊框
border-top-style:none; 上邊框樣式
border-bottom-style:solid; 下邊框樣式
border-left-style: dashed； 左邊框樣式
border-right-style:double; 右邊框樣式
border-style:dotted solid dashed double; （上右下左邊框）
2.設(shè)置邊框?qū)挾龋?/strong>
邊框?qū)挾炔荒軉为?dú)設(shè)置，必須在設(shè)置了邊框樣式后寬度才會(huì)生效
border-width:1px; 寬度為1像素的邊框
border-top-width:15px; 上邊框15像素
border-bottom-width:15px; 下邊框
border-left-width:15px; 左邊框
border-right-width:15px; 右邊框
CSS輪廓 outline
outline（輪廓）是繪制于元素周?chē)囊粭l線，位于邊框邊緣外圍，可以起到突出元素的作用 可以設(shè)置的屬性有 顏色 樣式 寬度
1、輪廓顏色
outline-color：red；
2.輪廓樣式
outline-style：樣式值；
樣式值參考如下：
none 默認(rèn)。定義無(wú)輪廓。
dotted 定義點(diǎn)狀的輪廓。
dashed 定義虛線輪廓。
solid 定義實(shí)線輪廓。
double 定義雙線輪廓。雙線的寬度等同于 outline-width 的值。
groove 定義 3D 凹槽輪廓。此效果取決于 outline-color 值。
ridge 定義 3D 凸槽輪廓。此效果取決于 outline-color 值。
inset 定義 3D 凹邊輪廓。此效果取決于 outline-color 值。
outset 定義 3D 凸邊輪廓。此效果取決于 outline-color 值。
3、輪廓寬度：
outline-width：寬度值；
可能出現(xiàn)的寬度值參考如下；
thin 規(guī)定細(xì)輪廓。
medium 默認(rèn)。規(guī)定中等的輪廓。
thick 規(guī)定粗的輪廓。
length 允許您規(guī)定輪廓粗細(xì)的值。
CSS外邊距 margin
1、什么是外邊距
外邊距控制塊級(jí)元素之間的距離，他們是透明不可見(jiàn)的，包括margin-top, margin-right, margin-bottom, margin-left
2.外邊距的寫(xiě)法
（1）margin: 40px 30px 20px 10px; 上右下左
（2）margin:30px 40px 20px; 上 左右 下
（3）margin:30px 40px; 上下 左右
（4）margin:40px; 上下左右
3.可能的值
（1）length 規(guī)定具體單位記的外邊距長(zhǎng)度
（2）% 基于父元素的寬度的外邊距的長(zhǎng)度
（3）auto 瀏覽器計(jì)算外邊距
四、CSS內(nèi)邊距padding
1.什么是內(nèi)邊距
控制塊級(jí)元素內(nèi)部content和border之間的距離
2、常用寫(xiě)法
（1）padding: 40px 30px 20px 10px; 上右下左
（2）padding:30px 40px 20px; 上 左右 下
（3）padding:30px 40px; 上下 左右
（4）padding:40px; 上下左右
3.可能取的值
（1）length 規(guī)定具體單位記的外邊距長(zhǎng)度
（2）% 基于父元素的寬度的外邊距的長(zhǎng)度
（3）auto 瀏覽器計(jì)算外邊距
CSS2/CSS3邊框樣式：border有哪些屬性值？最先出現(xiàn)在南通力行網(wǎng)絡(luò)科技有限公司。
]]>背景樣式主要包括背景顏色和背景圖像。
1.background-color 設(shè)置元素的背景顏色。
background-color：顏色/transparent
說(shuō)明：transparent是全透明
顏色值（顏色名/RGB/十六進(jìn)制）
背景區(qū)包括內(nèi)容、內(nèi)邊距（padding）和邊框（border）、不包含外邊距（margin）
2.background-image 設(shè)置元素的背景圖片。
background-image：url(圖片地址)/none
說(shuō)明：url地址可以是相對(duì)地址也可以是絕對(duì)地址
元素的背景占據(jù)了元素的全部尺寸，包括內(nèi)邊距和邊框，但不包括外邊距
默認(rèn)地，背景圖像位于元素的左上角，并在水平和垂直方向上重復(fù)。
當(dāng)即設(shè)置了背景圖片又設(shè)置了背景顏色時(shí)，背景圖片會(huì)覆蓋背景顏色
3.background-position 設(shè)置背景圖片的起始位置
A. 這個(gè)屬性只能應(yīng)用于塊元素和替換元素，替換元素包括img、input、textarea、select和object。
B. 該屬性值可以設(shè)置為關(guān)鍵字，也可以設(shè)置為兩個(gè)像素值（”20px 30px“），設(shè)置為關(guān)鍵字時(shí)表示背景圖像相對(duì)于元素的左上角的距離（分別是水平距離和垂直距離）。
C. 該屬性值可取的關(guān)鍵字為：
top left：左上（表示圖像位于元素的左上角，下面的類(lèi)似）
top center：靠上居中
top right：右上
left center：靠左居中
center center：正中
right center：靠右居中
bottom left：左下
bottom center：靠下居中
bottom right：右下
4.background-attachment 背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)
background-attachment：scroll/fixed
scroll： 默認(rèn)值，隨著圖片的滾動(dòng)而滾動(dòng)
fixed：當(dāng)頁(yè)面的其余部分滾動(dòng)時(shí)，背景圖片不會(huì)移動(dòng)
5.background-repeat 設(shè)置背景圖像是否重復(fù)及如何重復(fù)
該屬性可以取如下值：
??????? no-repeat：不平鋪
??????? repeat：在水平方向（x軸）和垂直方向（y軸）同時(shí)平鋪，默認(rèn)值
??????? repeat-x：在水平方向（x軸）平鋪
??????? repeat-y：在垂直方向（y軸）平鋪
6.background 簡(jiǎn)寫(xiě)屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中。
background：[background-color] [background-image] [background-repeat] [background-attachment] [background-position]
說(shuō)明：各值之間用空格分割，不分先后順序
示例代碼
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景屬性</title>
<style>
body{
height: 1000px;
/*背景顏色 默認(rèn)為透明 transparent*/
background-color: red;
/*background-color: #ff0000;*/
/*background-color: rgb(255,0,0);*/
/*background-color: rgba(255,0,0,.5);*/
/*背景圖片 默認(rèn)水平垂直平鋪*/
/*background-image: url("images/pic2.jpeg");*/
/*背景圖片平鋪*/
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*背景圖片的大小*/
/*background-size:1000px ;*/
/*background-size: 100% 100%;*/
/*背景圖片固定*/
/*background-attachment:fixed ;*/
background:red url("images/pic2.jpeg") no-repeat fixed ;
background-size: 100% 100%;
}
.box{
width: 800px;
height: 600px;
/*background-color: rgba(255,255,255,.5);
background-image: url("images/pic1.jpg");
background-repeat: no-repeat;*/
/*background-size: contain;*/
background: rgba(255,255,255,.5) url("images/pic1.jpg") no-repeat;
/*背景圖片定位*/
/*background-position: x y;*/
/*當(dāng)只有水平方向，垂直方向默認(rèn)居中*/
/*background-position: 30px 30px;*/
/*background-position: 30px;*/
/*background-position: right bottom;*/
/*background-position: center;*/
/*簡(jiǎn)寫(xiě)為*/
/*background：顏色 圖片 平鋪 大小 定位 固定;*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS背景樣式：background屬性最先出現(xiàn)在南通力行網(wǎng)絡(luò)科技有限公司。
]]>短短的幾行 CSS 代碼變灰整個(gè)頁(yè)面：
html,body{
filter:grayscale(1);
filter: gray; /* IE9 - */
}具體就是用到了 CSS3 的灰度濾鏡。此代碼不兼容 IE10，IE11（其實(shí)，現(xiàn)在基本上沒(méi)人用 IE了吧？）
還有一種寫(xiě)法：
<style type=”text/css”>html {-webkit-filter: grayscale(100%);}</style>
上面的 CSS 代碼可能只對(duì)主流瀏覽器支持，如果你需要支持 QQ 瀏覽器、360 瀏覽器、IE 瀏覽器等等其他瀏覽器需要使用下面這段：
<style>
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}
</style>
將代碼放入前即可讓對(duì)應(yīng)網(wǎng)頁(yè)變黑灰色！filter 是濾鏡的意思，filter:gray 的意思就是說(shuō)給頁(yè)面加上一個(gè)灰度的濾鏡，所以 html 里面的所有內(nèi)容都會(huì)變成黑白的了。不過(guò)這個(gè)濾鏡對(duì)于 chrome 和 safari 瀏覽器是無(wú)效的，所以下面會(huì)有一行-webkit-filter: grayscale(100%);這個(gè)樣式是專(zhuān)屬于使用 webkit 內(nèi)核的瀏覽器的，意思和 FILTER: gray;差不多，只是寫(xiě)法不同罷了。
CSS3幾句代碼實(shí)現(xiàn)網(wǎng)站變黑白色最先出現(xiàn)在南通力行網(wǎng)絡(luò)科技有限公司。
]]>
CSS思維導(dǎo)圖(基礎(chǔ)版),7張圖看懂CSS框架最先出現(xiàn)在南通力行網(wǎng)絡(luò)科技有限公司。
]]>什么是CSS？
CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡(jiǎn)稱(chēng)。
CSS 是一種標(biāo)記語(yǔ)言，屬于瀏覽器解釋型語(yǔ)言，可以直接由瀏覽器執(zhí)行，不需要編譯。
CSS 是用來(lái)表現(xiàn)HTML或XML的標(biāo)記語(yǔ)言。
CSS 是由W3C的CSS工作組發(fā)布推薦和維護(hù)的.
CSS 是編程入門(mén)人員的必修課，運(yùn)用CSS樣式可以讓頁(yè)面變得美觀。
CSS語(yǔ)法由三部分構(gòu)成：選擇器、屬性和值： selector {property: value}
CSS3和CSS有什么區(qū)別
CSS3 是最新的 CSS 標(biāo)準(zhǔn)。 CSS3是CSS（層疊樣式表）技術(shù)的升級(jí)版本，于1999年開(kāi)始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等模塊 。
css3比css多了一些樣式設(shè)置而已。 css3是向前兼容的，也就是說(shuō)，css中有效的code在css3也有效。
一個(gè)css與css3都有效的code，如果瀏覽器不支持css3，那么只會(huì)以css的樣式顯示。最常見(jiàn)的就是圓弧角。
一個(gè)只在css3中有效的code，如果瀏覽器不支持css3，那么其顯示效果就不會(huì)出現(xiàn)。 css3和css，在編寫(xiě)code的時(shí)候，除了對(duì)一些css3中新出現(xiàn)的屬性設(shè)置，其它完全一樣。
CSS演進(jìn)的一個(gè)主要變化就是W3C決定將CSS3分成一系列模塊。瀏覽器廠商按CSS節(jié)奏快速創(chuàng)新，因此通過(guò)采用模塊方法，CSS3規(guī)范里的元素能以不同速度向前發(fā)展，因?yàn)椴煌臑g覽器廠商只支持給定特性。但不同瀏覽器在不同時(shí)間支持不同特性，這也讓跨瀏覽器開(kāi)發(fā)變得復(fù)雜 。
CSS3是CSS2的升級(jí)版本，3只是版本號(hào)，它在CSS2.1 的基礎(chǔ)上增加了很多強(qiáng)大的新功能，目前主瀏覽器 Chorme、Safari、Firefox、Opera、甚至360都已經(jīng)支持了CSS3大部分功能了，IE10以后也開(kāi)始全面支持CSS3了。
在編寫(xiě)CSS3樣式時(shí)，不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規(guī)則尚未成為W3C標(biāo)準(zhǔn)的一部分。是瀏覽器的私有屬性雖然目前較新版本的瀏覽器都是不需要前綴的，但為了更好的向前兼容，前綴還是少不了的。
Chrome 和 Safari：-webkit
Firefox：-moz
IE：-ms
Opera：-o
CSS3能做什么？有哪些強(qiáng)大功能？
CSS3 把很多以前需要使用的圖片和腳本來(lái)實(shí)現(xiàn)的效果，甚至動(dòng)畫(huà)效果，現(xiàn)在只需要短短幾行代碼就能搞定。比如：圓角、圖片邊框、文字陰影和盒陰景、漸變、個(gè)性化字體、多圖片背景、變形處理（旋轉(zhuǎn)、縮放、傾斜、移動(dòng)）、過(guò)渡、動(dòng)畫(huà)、多欄布局、媒體查詢(xún)等。還有選擇器，簡(jiǎn)化了前端開(kāi)發(fā)工作人中山小欖的設(shè)計(jì)過(guò)程，加快頁(yè)面載入速度。
CSS3簡(jiǎn)化了前端開(kāi)發(fā)工作人員的設(shè)計(jì)過(guò)程，加快頁(yè)面載入速度。
CSS3都有哪些強(qiáng)大功能呢？各位小伙伴一起來(lái)看看吧！
CSS3最重要的模塊包括：
選擇器
框模型
背景和邊框
文本效果
2D/3D 轉(zhuǎn)換
動(dòng)畫(huà)
多列布局
用戶(hù)界面
CSS3新增屬性
box-shadow(陰影效果)
border-colors(為邊框設(shè)置多種顏色)
boder-image(圖片邊框)
text-shadow(文本陰影)
text-overflow(文本截?cái)?
border-radius(圓角邊框)
opacity(不透明度)
box-sizing(控制盒模型的組成模式):指定兩個(gè)boxes接壤
resize(元素縮放):指定一個(gè)div元素，允許用戶(hù)調(diào)整大小
outline(外邊框)
background-origin(指定背景圖片從哪里開(kāi)始顯示)
background-clip(指定背景圖片從什么位置開(kāi)始裁切)
background(為一個(gè)元素指定多個(gè)背景)
什么是CSS3?CSS3和CSS有什么區(qū)別最先出現(xiàn)在南通力行網(wǎng)絡(luò)科技有限公司。
]]>