CSS圆角边框和盒子阴影

圆角边框

1.圆形

• 语法

border-radius:length;

• 方法：让一个正方形变成圆圈

div {
	width: 200px;
	height: 200px;
	background-color: pink;
	/* border-radius:length; */
	border-radius: 50%;
}

我们想在网页里导入图片变成圆形头像就可以用这个方法

如上，只需要导入一张图片再用我们的border-radius:length;

代码如下：

div {
    width: 200px;
    height: 200px;
    background-image: url(images/猫.gif);
    /* border-radius:length; */
    border-radius: 50%;
}

2.圆角矩形

圆角矩形的话只给高度的一半就可以了。不用百分比，精确单位。

 p {
	width: 100px;
	height: 20px;
	background-color: red;
	color: #fff;
    /* border-radius:length; */
	border-radius: 10px;
}

盒子阴影

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /*border-radius: 100px;*/
    border-radius: 50%;
    /* box-shadow:水平位置 垂直位置 模糊距离 
    阴影尺寸（影子大小） 阴影颜色  内/外阴影；*/
    box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
}

• 如下

注： 外阴影(outset)是默认的，不能写，想要内阴影可以写(inset)