border属性及其应用
border 简写属性在一个声明设置所有的边框属性。
border: width style color
可以按顺序设置如下属性:
- border-width
1.可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
2.或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin。
- border-style
1.none: 默认无边框
2.dotted: 定义一个点线边框
3.dashed: 定义一个虚线边框
4.solid: 定义实线边框
5.double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
6.groove: 定义3D沟槽边框。效果取决于边框的颜色值
7.ridge: 定义3D脊边框。效果取决于边框的颜色值
8.inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
9.outset: 定义一个3D突出边框。 效果取决于边框的颜色值
- border-color
name - 指定颜色的名称,如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”
应用border属性绘制三角形
原理:将边框设置足够宽就会显示三角形。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 0px;
height: 0px;
border-bottom: 100px solid green;
border-top: 100px solid red;
border-left: 100px solid #0000FF;
border-right: 100px solid orangered;
}
p{
width: 0px;
height: 0px;
border-bottom: 100px solid green;
border-top: 100px solid red;
border-left: 100px solid #0000FF;
border-right: 100px solid orangered;
border-color: red transparent transparent transparent;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>