1.CSS3的兼容性问题:IE9及以上都支持。
2.盒子模型
1)当所有的border都是一样的颜色的时候:
运行效果:
2)如果所有的盒子的颜色都不一样:
运行效果:
3)假设盒子的宽、高均为0,则:
运行效果:
4)小三角的写法:
<!DOCTYPE html> <html lang="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 lang="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.边框不属于宽高的一部分。