1.CSS3的相容性問題：IE9及以上都支援。
2.盒子模型
1）當所有的border都是一樣的顔色的時候：
運作效果：
2）如果所有的盒子的顔色都不一樣：
運作效果：
3）假設盒子的寬、高均為0，則：
運作效果：
4）小三角的寫法：
<!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title>小三角</title>
<style type="text/css">
div{
width: 0;
height: 0;
/*border:10px solid red;*/ /*所有的邊框的顔色一樣*/
/*border-top: 10px solid red;*/
/*border-right:10px solid green;*/
/*border-bottom:10px solid blue;*/
/*border-left:10px solid yellow;*/
/*下面的三行代碼和上面的三行代碼的效果是一樣的*/
/*border-style: solid;*/
/*border-width: 10px;*/
/*border-color: red green blue yellow; !*上、右、下、左*!*/
/*dashed解決IE6不支援透明度transparent的問題，其他浏覽器是可以不寫dashed的*/
border-style: solid dashed dashed dashed;
border-width: 10px;
/*transparent表示透明，隻有上面的三角是有顔色的，其他的都是透明的*/
border-color: #F00 transparent transparent transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 運作效果：
3.小三角的另一種寫法：
<!DOCTYPE html>
<html en">
<head>
<meta charset="UTF-8">
<title>小三角2</title>
<style type="text/css">
*{
margin:0;
padding: 0;
list-style: none;
}
ul{
margin:100px;
}
ul li{
width: 200px;
height: 35px;
line-height: 35px;
/*border:1px solid green;*/
}
ul li a{
font-size: 15px;
color: #3c3c3c;
text-decoration: none;
margin-right: 10px;
float: left;
height: 35px;
line-height: 35px;
}
ul li i{
display: block;
width: 6px;
height: 6px;
/*background-color: #FF100A;*/
float: left;
margin: 15px 0;
position: relative;
}
em,span{
width: 0;
height: 0;
border-style: solid dashed dashed dashed; /*隻有一個邊框是實線的*/
border-width: 3px;
border-color: transparent;
position: absolute;
left: 0;
top:0;
}
em{
border-top-color: #333333; /*此時em小色塊就變成了顔色為#333的向下的小三角*/
top:1px; /*top為1，也就是相當于下面的盒子往下走了1px,使得最終露出了的也就明顯一些*/
}
/*注意此處是border-top-color，不是border-color*/
span{border-top-color: #fff} /*上面的盒子跟背景色保持一緻*/
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="#">我的三角練習</a>
<i>
<em></em>
<span></span>
</i>
</li>
</ul>
</div>
</body>
</html> 運作效果：
4.CSS3 ——小三角 2D旋轉
實作點選文字以及小三角時，小三角會旋轉。
在上述代碼做以下修改：
運作效果：
5.邊框不屬于寬高的一部分。