CSS3的圆角边框实际上是在矩形的4个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度：
border-radius属性的4个值是按照top-left、top-right、bottom-right和bottom-left的顺序来设置的。
border-radius 属性是一个最多可指定四个 border-*-radius 属性的复合属性：
border-top-left-radius: <length> <length> // 左上角
border-top-right-radius: <length> <length> // 右上角
border-bottom-right-radius: <length> <length> // 右下角
border-bottom-left-radius: <length> <length> // 左下角
提示： 这个属性允许你为元素添加圆角边框！
圆角边框 - border-radius: 15px 50px 30px 5px：第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角：
圆角边框 - border-radius: 15px 50px 30px：第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于右下角：
圆角边框 - border-radius: 15px 50px：第一个值适用于左上角和右下角，第二个值适用于右上角和左下角
圆角边框 - border-radius: 15px：该值适用于所有四个角，均等圆角
试一试
试一试以下代码的效果吧。
<style>
#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners10 {
border-radius: 50px 15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
<body>
<p>椭圆边框 - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>
<p> 椭圆边框 - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>
<p>椭圆边框 - border-radius: 50%:</p>
<p id="rcorners9"></p>
<p>椭圆边框 - border-radius: 50px 15px:</p>
<p id="rcorners10"></p>
</body>
CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。
语法：box-shadow: h-shadow v-shadow blur spread color inset;
注意：1. 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效。
2.盒子阴影不占用空间，不会影响其他盒子排列。
3.box-shadow 参数值顺序不是固定的，几个像素值需要连在一起，投影方式写在第一个或者最后一个。
例如：
/* x轴偏移量：10px，y轴偏移量：10px，阴影模糊半径：10px,阴影扩展半径:-4px;阴影颜色:黑色，透明度为0.3 */
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3)
试一试
自行定义一个盒子实现阴影效果。
拓展思考：
如何实现以下效果：
原先盒子没有影子,当我们鼠标经过盒子就添加阴影效果
文字阴影：
学一学
在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。
语法：text-shadow: h-shadow v-shadow blur color;
例如：
text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
-
我的青春寄语
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
语法：
undefined
background-image: linear-gradient(angle, color-stop1, color-stop2);
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。
下面的实例演示了如何在线性渐变上使用角度：
实例
带有指定的角度的线性渐变：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>角度控制渐变方向</title>
<style>
#grad1 {
height: 100px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
height: 100px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
height: 100px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 100px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>
<h3>线性渐变 - 使用不同的角度</h3>
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>
7597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
