边框border:
border:width style color; (值没有顺序,空格分开)
width:1px;
color: red
style:solid实线,dashed虚线,dotted点画线(IE6不兼容dotted,);
div{
border:1px solid red;
border-top-color:black; //当只改变边框的一个值时可以这样写
border-bottom-width:
border-left-style:
}
border-top上边框; border-right右边框;
border-bottom下边框; border-left左边框
边框的形状:非矩形,取决于容器的大小,即宽高。可以利用边框特性做三角形。
上边是一个矩形
div {
width: 400px;
height: 400px;
border: 20px solid red;
border-top-color: black;
}
三角形
div {
width: 0;
height: 0;
border: 10px solid #fff; // 边框是白色
border-top-color: #ccc; //三角是灰色,10px,三角朝下
}
div {
width: 0;
height: 0;
border: 10px solid #fff; // 边框是白色
border-left-color: #ccc; //三角是灰色,10px,三角朝右
}
div {
width: 0;
height: 0;
border: 10px solid #fff; // 边框是白色
border-bottom-color: #ccc; //三角是灰色,10px,三角朝上
}
div {
width: 0;
height: 0;
border: 10px solid #fff; // 边框是白色
border-right-color: #ccc; //三角是灰色,10px,三角朝左
}