样式声明——边框属性

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
CSS系列文章——传送门

---

---

1.边框的样式： border-style

• none 默认无边框
• dotted 定义一个点线边框
• dashed 定义一个虚线边框
• solid 定义实线边框
• double 定义两个边框,两个边框的宽度和 border-width 的值相同

2.边框的宽度： border-width

3.边框的颜色： border-color

• name 指定 颜色名称
• RGB 指定 RGB 值
• Hex 指定 十六进制值

4.利用边框制作一个三角形

.box{
	width: 0px;
	height:0px;
	border-top: 100px solid transparent;
	border-bottom: 100px solid yellow;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	简写为：
	border: 100px solid transparent;
	border--bottom-color: yellow; // 设置单边上的颜色
}

• transparent代表透明色

5.利用边框制作一个梯形

.box {
    width: 80px;
    height: 80px;
    border: 50px solid transparent;
    border-top-color: skyblue;
}

需要注意的是：border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式

6.简写

可简写属性： border: 宽度，样式，颜色

---

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog