div盒子边框圆角_css：css3（圆角边框、盒子阴影、文字阴影）

1、圆角边框

定义圆角边框后，可以将盒子定义为圆角的

(1)长度方式

盒子模型外边距

width: 200px;

height: 100px;

background-color: yellowgreen;

border-radius:3px;

}

设置成高度的一半：

width: 200px;

height: 100px;

background-color: yellowgreen;

border-radius:50px;

}

(2)百分比方式

圆形：长度为正方形的一半：

盒子模型外边距

width: 200px;

height: 200px;

background-color: yellowgreen;

border-radius:50%;

}

百分比方式定义盒子：

width: 200px;

height: 100px;

background-color: yellowgreen;

border-radius:5%;

}

(3)不同的角设置不同的圆角

以左上角为起点，顺时针的方式

width: 200px;

height: 200px;

background-color: yellowgreen;

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

}

(4)选择角去设置：

width: 200px;

height: 200px;

background-color: yellowgreen;

border-bottom-right-radius: 16px;

}

2、盒子阴影

(1)前两个为必选项，后四个可写可不写

width: 200px;

height: 200px;

background-color: yellowgreen;

border-radius: 16px;

box-shadow:10px 10px 10px 10px rgba(0,0,0,0.3);

}

(2) 只写前两个属性：

width: 200px;

height: 200px;

background-color: yellowgreen;

border-radius: 16px;

box-shadow:10px 10px;

}

3、文字阴影

width: 200px;

height: 200px;

text-shadow: 5px 5px 6px rgba(0,0,0,0.3);

}

人之初，性本善