1.CSS3的兼容性问题:IE9及以上都支持。
2.盒子模型
1)当所有的border都是一样的颜色的时候:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIyVGduV2QvwVe0lmdhJ3ZvwFM38CXlZHbvN3cpR2Lc1TPB10QGtWUCpEMJ9CXsxWam9CXwADNvwVZ6l2c052bm9CXUJDT1wkNhVzLcRnbvZ2LcZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39zN3IzNxQTM2EDOxMDM2EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
运行效果:
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.边框不属于宽高的一部分。