盒子模型的边框设定

  • Post author:
  • Post category:其他


边框(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;



版权声明:本文为wyt20040310原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。