盒子模型的边框设定

边框（border）元素设置边框

边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

设置边框必须指定三个样式 边框大小、边框的样式、边框的颜色

边框大小：border-width

边框样式：border-style

边框颜色：border-color

掌握： 跟多个值的情况、单独设置某一边、默认值、样式的可选值

箭头的写法

.box {

width: 0px;

height: 0px;

background-color: rgb(222, 255, 170); 

边框的大小 如果省略，有默认值，大概1-3px ，不同的浏览器默认大小不一样

border-width 后可跟多个值

四个值 上 右 下 左

三个值 上 左右 下

二个值 上下 左右

一个值 上下左右

单独设置某一边的边框宽度

border-bottom-width

border-top-width

border-left-width

border-right-width

border-width: 20px;

border-left-width:40px ; 

边框的样式

border-style 可选值

默认值：none

实线 solid

虚线 dashed

双线 double

点状虚线 dotted

border-style: solid;

/* 设置边框的颜色 默认值是黑色

border-color 也可以跟多个值

四个值 上 右 下 左

三个值 上 左右 下

二个值 上下 左右

一个值 上下左右

对应的方式跟border-width是一样

单独设置某一边的边框颜色

border-XXX-color: ;

border-color: transparent transparent red transparent ;

}

.box1{

width: 200px;

height: 200px;

background-color: turquoise;

简写border

1、 同时设置边框的大小，颜色，样式，没有顺序要求

2、可以单独设置一个边框

border-top:; 设置上边框

border-right 设置右边框

border-bottom 设置下边框

border-left 设置左边框

3、去除某个边框

border:none;