2020-02-16 21:13:46 网页布局常用边框样式css必须掌握的属性。认识和掌握对边框CSS样式的使用。
边框样式可以对一般HTML标签都可以设置，并且都能成功，比如可以对p、div、ul、li、table、h1、h2、h3、span、em、strong、b、i、u等标签都可以设置border边框样式。
一、边框样式单词
border —— 单独代表对四边设置边框
border-top —— 只设置上边框
border-bottom —— 只设置下边框
border-left —— 只设置左边框
border-right —— 只设置右边框
border:1px solid #000;border-left:0 —— 设置上、右、下三边边框为实体线黑色边框。注意前后顺序。相当于先设置4条边样式，又单独后面设置哪条边另外样式，这样节约代码技巧。
二、边框语法
边框样式一般同时设置3个值，值与值之间需要一个空格。
三个值分别是：线宽度、线体样式、线颜色
如：border:1px solid #000
即：
1px代表：设置边框线宽1px；
solid 代表：设置线体样式；
#000代表：设置边框颜色
三、边框虚线与实线
边框有实体线和虚线、短虚线三者常用的边框线样式，其它线体样式兼容不好。
分别是：
solid —— 实体线
dashed —— 虚线
dotted —— 短虚线
以上三个是边框常用的线体样式。
四、边框颜色代码简写
以前边框三个值都是否开单独，后来简写代码节约代码，兼容和效果相同，同时css5也推荐使用简写代码。
原来：
border-color:#000; border-style:solid; border-width:1px
现在简写：
border:1px solid #000
这样节约很多代码。当然三个值需要空格隔开，同时这3个值不分顺序，效果兼容一样。
border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px
简写：
border-bottom：#000 1px solid
以上对边框border样式各种用法、各种技巧进行介绍，可以轻松掌握css 边框的用法。
重要说明：当然对边框设置阴影、边框设置圆角又是另外css样式而非此边框样式。