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