CSS样式-边框border-*

边框宽度：

border-width

边框样式：

border-style:none,solid,dashed,dotted

边框颜色：

border-color

圆角：

border-radius，单位可以是百分比，也可以是px

举例：border-radius:50%; border-radius:20px;

boder-radius，一次设定四个角的方法：左上 右上 右下 左下

第一种：border-radius: 50%; 

第二种：border-radius: 0 50%; 左上和右下设定0，右上和左下设定50%；

第三种：border-radius: 0 30% 50%; 左上设定0，右上和左下设定30%，右下设定50%；

第四种：border-radius: 10% 20% 30% 50%; 左上设定10%， 右上设定20%， 右下设定30%， 左下设定50%；

 

/*练习：画圆圈*/

border: 125px solid #000;

border-radius: 100%;

border-right-color: #f00;

/* 一次性的设定方法：四种 */

border: 20px solid #000;

/* 以border-width为例*/

/* 第一种：上右下左全部改成 40px */

/* border-width: 40px; 

/* 第二种，上下40px，左右20px */

/* border-width: 40px 20px; */

/* 第三种，上80px，下40px，左右 20px */

/* border-width: 80px 20px 40px; */

/* 第四种，上80px, 右20px, 下40px, 左10px */

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

连写模式：

宽度 样式 颜色

举例： border: 1px solid #f00;

边框共四条边，顺序分别是 top right bottom left

 

/练习：其他边都是5px，solid，黑色，只有右边是红色*/
border: 5px solid #000;

/*border-right: 5px solid #f00;*/

border-right-color: #f00;