盒子边框

大家好，我是小栖，今天给大家分享一下元素转化为盒子边框。

1、display:可以转化元素自身的属性值

2、block:将行内元素转化为块级元素

3、inline:将块级元素转化为行内元素

4、行内元素：没有固定的宽高，宽高都是通过内容来撑开

5、块级元素：自身具有高宽，独具一行。

一、css盒子边框:CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。

1、border

border : border-width || border-style || border-color 
none：没有边框即忽略所有边框的宽度（默认值）
 solid：边框为单实线(最为常用的) 
 dashed：边框为虚线   
 dotted：边框为点线 
 double：边框为双实线

2、边框

（1）上边框：border-top-style border-top-width

（2）下边框：botder-bottom-style border-bottom-width

（3）左边框：botder-left-style border-left-width

（4）右边框：botder-right-style border-right-width

（5）样式综合设置：botder-style

（6）宽度综合设置：border-width

（7）颜色综合设置：borter-color

（8）边框综合设置：borter:四边宽度 四边样式 四变颜色；

例子：

 border-top: 1px solid red; /*上边框*/
 border-bottom: 2px solid green; /*下边框*/
 border-left: 1px solid blue; 
 border-right: 5px solid pink; 
 border: 1px solid red;