目录
一、边框的设置
边框大家都很熟悉，举例来说就是相当于咱们穿了一件衣服，并且这件衣服是属于你的一部分。边框的样式有很多，主要有边框宽度，边框样式、边框颜色和边框圆角。
1.边框宽度
边框宽度就是设置这个边有多宽，举例就是你穿的衣服有多厚。
border-width:像素值; - - - 单位：px
2.边框样式
边框样式就是边框是由那种图案或者样式组成的，简单来说就是你穿的衣服是什么类型的，是短袖、长袖、还是衬衣。
border-style:样式; ***不写这个属性，则不会显示边框
主要类型有：
| none | 定义无边框 |
| hidden | 与‘none’相同，定义隐藏边框 |
| dotted | 点状边框。低版本浏览器呈现实线 |
| dashed | 虚线框。低版本浏览器呈现实线 |
| solid | 定义实线边框 |
| double | 定义双实线。双线的宽度等于border-width的值 |
| grove | 3D凹槽边框。其效果取决于border-color |
| rideg | 3D垄状边框。其效果取决于border-color |
| inset | 3Dinset边框。其效果取决于border-color的值 |
| outset | 3Doutset边框。其效果取决于border-color的值 |
注：经常用的有solid、dashed、dotted,其他边框知道就可以。
3.边框颜色
边框颜色很容易理解，相当于你的衣服是什么颜色的。
border-color:颜色;
颜色主要有三种表现形式：
① 英文单词
比如red、pink、blue、yellow等等
②十六进制（0-9和a-f组成的六位）我就不详细说明十六进制了
#aaaaaa、#125fed、#f00000、#fd23ac等等等
③rgb(0-255,0-255,0-255)
里面的数值写0-255之间的整数。
4.复合写法
咱们可以将边框样式、边框宽度、边框颜色结合到一起。
border:width style color;
e.g ：border:1px solid #f00;
5.边框圆角
border-radius:; 单位：像素px / 百分比
边框圆角可以统一设置边框的圆角，也可以每个角单独的设置。
border-radius --- 同时设置四个角
border-top-left-radius --- 设置左上角
border-top-right-radius --- 设置右上角
border-bottom-left-radius --- 设置左下角
border-bottom-right-radius --- 设置右下角
边框变形
border-radius : 10px / 20px; ---- X轴像素 / Y轴像素
border-radius : 10px 20px 30px 40px / 20% 30% 40% 50%;、
设置不同的比例可以出现不同的形状，大家可以亲自实验一下。
五、总结
今天所总结的关于边框的属性，都可以给四个边单独的设定不同的样式，总结的 知识点希望对大家有所帮助。
努力过后不会后悔！
417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
