站建設CSS3中引入的新特性和功能。這些新特性極大地增加了web程序的表現能力，同時簡化了web UI的編程模型。下面成都網站建設蜀風科技將詳細介紹這些CSS3的新增特性。

1、強大的選擇器

網站建設CSS3的選擇器在CSS2.1的基礎上進行了增強，它允許設計師在標簽中指定特定的HTML元素而不必使用多余的類、ID或者JavaScript腳本。

如果希望設計出簡潔、輕量級的網頁標簽，希望結構與表現更好地分離，高級選擇器是非常有用的。它可以大大簡化我們的工作，提供編寫代碼效率，并讓我們很方便地制作出可維護性的頁面。

2、半透明度效果的實現

網站建設中RGBA不僅可以設定色彩，還能設定元素的透明度。無論是文本、背景還是邊框均可使用該屬性。該屬性的語法在其支持的瀏覽器中形同。

3、多欄布局

網站建設新的CSS3選擇器可以讓用戶不必使用多個DIV標簽就能實現多欄布局。瀏覽器解釋這個屬性并生成多欄，讓文本實現一個仿報紙的多欄結構。

4、多背景圖

CSS3允許背景屬性設置多個屬性值，這樣就可以在一個元素上添加多層背景圖片。

5、塊陰影和文字陰影

盡管box-shadow和text-shadow再CSS2中就已經存在，但是它們未被廣泛應用，它們將在CSS3中被廣泛采用。塊陰影和文字陰影可以不用圖片就能對HTML元素添加陰影，增加顯示的立體感增強設計的細節。塊陰影使用box-shadow屬性，文字陰影使用text-shadow屬性，該屬性目前在Safari和Chorme中可用。

6、圓角

網站建設CSS3新功能中最常用的一項就是圓角效果，Border-radius無須背景圖片就能給HTML元素添加圓角。不同于添加JavaScript或多余的HTML標簽，僅僅需要添加一些CSS屬性并從好的方面考慮。這個方案是清晰的和比較有效的，而且可以讓你免于花費幾小時來尋找精巧的瀏覽器方案和基于JavaScript圓角。

7、邊框圖片

網站建設中Border-image屬性允許在元素的邊框上設置圖片，這使得原本單調的邊框樣式變得很豐富。讓你從通常的solid、dotted和其他邊框樣式中解放出來。改屬性給設計師一個更好的工具，用它可以方便地定義設計元素的邊框樣式，比background-imag屬性或枯燥的默認邊框樣式更好用。也可以明確的定義一個邊框可以被如何縮放或平鋪。

8、形變效果

網站建設通常使用CSS和HTML我們是不可能使用HTML元素旋轉或傾斜一定角度的。為了使元素看起來更具有立體感，我們不得不把這種效果做成一個圖片，這樣就限制了很多動態的使用應用場景。Transform數學的引入使我們以前通常要借助SVG等矢量繪圖手段才能實現的功能，只需要一個簡單的CSS屬性就能實現。

9、媒體查詢

媒體查詢可以讓你為不同設備基于它們的能力定義不同的樣式。如在可視區域小于400像素的時候，想讓網站側欄顯示在主內容的下邊，這樣它就不應該浮動并顯示在右側了。

10、CSS3線性漸變

漸變色是網頁設計中很常用的一項元素，它可以增強網頁元素的立體感，同事使單一顏色的頁面看起來不是那么突兀。過去為了實現漸變色，通常需要先制作一個漸變的圖片，將它切割成很細的一小片，然后使用背景重復是整個HTML元素擁有漸變的背景色。這樣做有兩個弊端：為了使用圖片背景，很多時候使得本身簡單的HTML結果變得復雜；另外，受制于背景圖片的長度火寬度，HTML元素不能靈活的冬天調整大小。CSS3中Webkit和Mozilla對漸變都有強大的支持。

成都蜀風科技打造與企業品牌相匹配的網站及微信開發，對每一個網站建設和微信開發項目，都以策略先行，再將創意與技術完美結合。 為企業打造出與企業品牌氣質相匹配的網絡品牌形象。 我們始終保持行業領先開發水平，不斷掌握領先的網絡技術。

• 理
• 1. 先創建一個div
• 2. 然后給div設定邊框。
• 3. 給div的四個邊框都設置不同的顏色
• 4. 把寬度和高度都變成0
• 5. 其余角為透明
• 6. 兼容IE6瀏覽器
• 造成這樣的原因是：
• 最簡單的解決辦法：(后面添加)
• 其他的解決辦法：
• 7. 解決內聯元素的三角顯示問題
• 為什么會有這個問題
• 解決辦法
• 1. 去掉固定的內容高度
• 2. 將內聯元素轉化為塊級元素或者行內塊元素
• 3. 將元素脫標（如果涉及特殊的布局可以直接使用）
• 最終代碼
• 擴展
• 有角度的三角
• 有一個角是直角的三角
• 箭頭
• 對話框
• 兼容IE8的小圓角矩形
• 利用css3旋轉來制作三角形

簡介

三角的做法有好幾種：

• 圖片、精靈圖（網易）
• 字體圖標（京東）
• 純代碼寫（亞馬遜）

這里主要介紹的純代碼寫的。

優點

1. 代碼寫的三角，不管大小是多少，是不失真的。
2. 代碼運行比圖片更快。
3. 如果項目中沒有引用字體圖標，代碼寫是比較可靠的。

原理

原理就是使用css的盒模型中的border屬性

使用border屬性就可以實現一個兼容性很好的三角圖形效果，其底層受到border-style的inseet/outset影響，邊框3D效果在互聯網早期還是很流行的，。

1. 先創建一個div

<div></div>

2. 然后給div設定邊框。

div{
 width:200px;
 height:100px;
 border:10px solid red; 
}

可以看到效果：

3. 給div的四個邊框都設置不同的顏色

div{
 width:200px;
 height:100px;
 border-left:10px solid red;
 border-top:10px solid green; 
 border-right:10px solid blue; 
 border-bottom:10px solid yellow; 
}

可以看到以下效果：

可以看到兩個border交叉的地方，有斜邊存在。

4. 把寬度和高度都變成0

div{
 width:0px;
 height:0px;
 border-left:10px solid red;
 border-top:10px solid green; 
 border-right:10px solid blue; 
 border-bottom:10px solid yellow; 
}
/*也可以這么寫*/
div{
 width:0px; 
 height:0px;
 border:10px solid; 
 border-color:red green blue yellow;
}

可以看到以下效果：

這個時候就看得很明顯了，出現了四個三角。那如果要出現一個，那么就將其他的三個弄成透明色就可以了。

這個就是三角形的由來。

5. 其余角為透明

這里的設置也遵循 上右下左 的順序，把不需要的角弄成透明色。

div{
 width:0px; 
 height:0px;
 border-width:10px; 
 border-color:#f00 transparent transparent transparent;
 border-style:solid;
}
/*也可以再進行合并*/
div{
 width:0px; 
 height:0px;
 border:10px solid; 
 border-color:#f00 transparent transparent transparent;
}

這樣一個三角就完成了。 那么問題來了，那就是兼容問題，IE6的兼容問題，如果不要求兼容IE6可以忽略下一步。

6. 兼容IE6瀏覽器

同樣的一個三角，在IE6的顯示是什么呢？

造成這樣的原因是：

• IE6不支持border的transparent
• IE6的高度最小為19px，不支持高度為0

在IE6下面，如果想把元素例如div設置成19像素以下的高度就設置不了了。這是因為IE6瀏覽器里面有個默認的高度，IE6下這個問題是因為默認的行高造成的。

最簡單的解決辦法：(后面添加)

div{
 /*不支持transparent*/
 border-style:solid dashed dashed dashed;
 /*高度最小不為0*/
 overflow:hidden;
}

1. 查了查網上的，如果是IE6不支持transparent, 可以這么做：

div{
 border:solid 1px transparent; 
 _border-color:tomato; 
 _filter:chroma(color=tomato); 
}

所以我覺得用在這里也可以， BUT沒有親測過，如果哪位小可愛測過可以請告知我^ ^。

div{
 width:0px;
 height:0px;
 margin:100px auto;
 border-width:10px;
 border-style:solid;
 border-color:#f00 transparent transparent transparent;
 _border-color:#f00 tomato tomato tomato; 
 _filter:chroma(color=tomato);
}

1. 如果是解決IE6的高度問題(也可以前面加下劃線，表示兼容的IE6)

div{
 height:0;
 font-size:0;
 line-height:0;
 overflow:hidden;
}

7. 解決內聯元素的三角顯示問題

為什么會有這個問題

因為我們剛才用 <div> 去制作三角，當然我們經常會使用 <em><i> 或者偽元素去做一些小圖標。那么在顯示上面，可能會有問題。 下面的代碼：

<style>
em{
	width: 0;
	height: 0;
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
}
</style>
<em></em>

可以看到頁面是這個樣子的:

為什么是這個樣子的，那么我們再看的仔細一點。 它實際是這個樣子的。

造成這樣的原因

1. 是因為行內元素自己有固定的高度，不能設置寬高為0，所以上面下面都是50px沒有問題，但是中間撐開了距離，也就有了梯形的效果。
2. 而且如果上面沒有塊元素的時候，是從內聯元素的內容開始算起的，所以上面的border就會到瀏覽器可視區域的上面。

解決辦法

這個有很多的辦法：

1. 去掉固定的內容高度

使用font-size:0;可以去掉內容的固定高度。

em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	font-size: 0;
}

2. 將內聯元素轉化為塊級元素或者行內塊元素

em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	display: block; /*也可以是inline-block*/
}

3. 將元素脫標（如果涉及特殊的布局可以直接使用）

/*脫標*/
em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	position: absolute;
	top:0;
	left:0;
}
/*or 浮動*/
em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	float:left;
}

最終代碼

下面就是兼容了IE6版本的三角代碼。

div{
 width:0px; /*設置寬高為0*/
 height:0px;/*可不寫*/
 border-width:10px; /*數值控制三角的大小，垂直的位置*/
 border-color:#f00 transparent transparent transparent;/*上右下左，transparent是透明的*/
 border-style:solid dashed dashed dashed;/*設置邊框樣式，dashed是兼容IE6寫的*/
 overflow:hidden;/*兼容IE6最小高度不為0寫的*/
}

改變border-width,三角變大，是不失真的。很清晰。

==三角制作完成 。==

擴展

有角度的三角

上面制作的都是45度的三角，三角可以通過border的高度寬度確定角度。

比如這樣一個三角，只需要確定上下的和左右的寬度不一樣即可。

div{
	width: 0px;
	height: 0px;
	margin: 100px auto;
	border-width:10px 30px;
	border-color:transparent transparent transparent red;
	border-style:solid;
}

有一個角是直角的三角

觀察可以看到，是上面和右面的三角同時設置成一個顏色。就會出現直角的三角。

div{
	width: 0;
	border-width: 20px 10px;
	border-style: solid;
	border-color: red red transparent transparent;
}

箭頭

其實原理也簡單，就是兩個三角重疊在一起。上面的三角就是背景的顏色

<style type="text/css">
.san {
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid; 
	position: relative;
	}
.si {
	border-width: 30px;
	border-color: transparent transparent transparent #fff;
	border-style: solid; 
	position: absolute;
	left: -50px;
	top: -30px;
}
</style>
<!--html結構-->
<div class="san">
	<div class="si"></div>
</div>

對話框

這個使用偽元素去做就很方便。