html盒模型中border的写法,10.css盒子模型-边框常用写法及简写

为元素设置边框

要为一个元素设置边框必须指定三个样式

border-width:边框的宽度

border-color:边框颜色

border-style:边框的样式

1.设置边框的宽度

/* 如果指定一个值，则四边全都是该值 */

border-width:10px ;

/*指定了四个值则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的*/

border-width:10px 20px 30px 40px ;

/* 指定三个值，则三个值会分别设置给 上 左右 下 */

border-width:10px 20px 30px ;

/* 指定两个值，则两个值会分别设置给 上下 左右*/

border-width: 10px 20px ;

/* 除了border-width，CSS中还提供了四个border-xxx-width

xxx的值可能是top right bottom left

专门用来设置指定边的宽度 */

border-left-width:100px ;

2.设置边框的颜色

和宽度一样，color也提供四个方向的样式，可以分别指定颜色

border-color: red;

border-color: red yellow orange blue;

border-color: red yellow orange;

border-color: red yellow;

3.设置边框的样式

可选值：

none，默认值，没有边框

solid 实线

dotted 点状边框

dashed 虚线

double 双线

style也可以分别指定四个边的边框样式，规则和width一致，

同时它也提供border-xxx-style四个样式，来分别设置四个边

border-style: solid;

border-style: solid dotted dashed double;

示例:

.box1{

width: 300px;

height: 300px;

background-color: #bfa;

/*

* 设置边框的宽度

*/

border-width:10px 20px 30px 40px ;

/*

* 设置边框的颜色

*/

border-color: red yellow orange blue;

/*

* 设置边框的样式

*/

border-style: solid;

/*border-style: solid dotted dashed double;*/

}

预览效果:

image.png

4.边框简写

边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色

而且没有任何的顺序要求

border一指定就是同时指定四个边不能分别指定

border-top border-right border-bottom border-left

可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

border: red solid 10px;

border-left: red solid 10px;

border-top: red solid 10px;

border-bottom: red solid 10px;

border-left: red solid 10px;

border: red solid 10px;

border-right: none;

边框简写

.box{

width: 200px;

height: 200px;

background-color: #bfa;

border: red solid 10px;

}

预览效果:

image.png