1. border属性
画基本图形之前,先来介绍一下border的属性:
- 定义:border是用来指定元素边框的样式和颜色。
- 属性值:
border-width:
border-style:
border-color:
可以设置的颜色:
值 | 描述 |
---|---|
border-width | 规定边框的宽度。 |
border-style | 规定边框的样式。 |
border-color | 规定边框的颜色。 |
inherit | 规定应该从父元素继承 border 属性的设置。 |
值 | 描述 |
---|---|
thin | 定义细的边框。 |
medium | 默认。定义中等的边框。 |
thick | 定义粗的边框。 |
10px | 自定义边框的宽度。 |
inherit | 规定应该从父元素继承边框宽度。 |
值 | 描述 |
---|---|
none | 定义无边框。 |
hidden | 与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 |
dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
solid | 定义实线。 |
double | 定义双线。双线的宽度等于 border-width 的值。 |
groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
inherit | 规定应该从父元素继承边框样式。 |
- name:指定颜色的名称,如 “red”。
- RGB:指定 RGB 值, 如 “rgb(255,0,0)”。
- Hex:指定16进制值, 如 “#ff0000”。
- transparent:设置为透明。
注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。
border属性值简写为:border:5px solid red;,按照宽度、样式、颜色的顺序。
border属性也可以单独设置某一边的属性值,例如:border-top-style:solid;
2. 画图形
正方形和长方形
画正方形和长方形,只需直接设置其width和height即可。
也可以用border属性画正方形,如下:
#square {
width: 0;
height: 0;
border: 50px solid;
}
三角形
当我们设置属性如下时:
#triangle {
width: 0;
height: 0;
border-top: 40px solid powderblue;
border-right: 40px solid pink;
border-left: 40px solid bisque;
border-bottom: 40px solid grey;
}
会看见如图所示的四个三角形:
所以我们画一个朝上的三角形,只需更改代码如下:
#triangle {
width: 0;
height: 0;
/* border-top: 40px solid powderblue; */
border-right: 40px solid transparent;
border-left: 40px solid transparent;
border-bottom: 40px solid grey;
}
会看见如图所示的一个三角形:
如果需要画出朝向不同方向的三角形,只需将三角形顶点方向的属性值注释掉,与顶点对应的方向设置为需要的颜色,其它两边颜色设置为transparent即可。其它属性值根据需要进行设置。
圆形和椭圆形
width和height的值相同即为圆形,值不相同即为椭圆形。
#circle {
width: 100px;
height: 100px;
background: pink;
border-radius: 50%;
}