1. 圆角边框
在CSS3中，我们可以使用border-radius属性来设置元素的圆角边框。该属性接受一个长度值参数，用于指定边框圆角的半径大小。如果指定的值小于元素边框的一半，那么边角将被截断。
1.1 语法
selector{
border-radius: value;
}
其中，selector表示CSS选择器，value表示一个或多个长度值，可以是px、em、rem等。
1.2 示例
下面的代码演示了如何为一个<div>元素设置半径为10px的圆角边框：
div{
border: 2px solid #333;
border-radius: 10px;
}
上面的代码会把<div>元素的边框设置为2px的实线边框，并且把边框拐角设置为10px的圆角。
1.3 兼容性
虽然CSS3的border-radius属性已经得到了广泛支持，但为了兼容旧版浏览器，我们仍然需要使用浏览器私有前缀来定义该属性：
/* Safari and Chrome */
-webkit-border-radius: 10px;
/* Firefox */
-moz-border-radius: 10px;
/* Opera */
-webkit-border-radius: 10px;
-o-border-radius: 10px;
/* IE */
border-radius: 10px;
2. 阴影效果
在CSS3中，我们可以使用box-shadow属性来设置元素的阴影效果。该属性接受一个或多个参数，用于指定阴影的大小、颜色、模糊度等。
2.1 语法
selector{
box-shadow: h-shadow v-shadow blur spread color inset;
}
其中，h-shadow表示水平偏移量，可以为正数或负数；v-shadow表示垂直偏移量，可以为正数或负数；blur表示模糊度，可以为正数或0；spread表示阴影的扩展大小；color表示阴影颜色；inset表示是否为内阴影（默认为外阴影）。
2.2 示例
下面的代码演示了如何为一个p标签设置一个红色的内阴影：
p{
box-shadow: inset 0 0 5px #f00;
}
上面的代码会把p标签设置为一个红色的内阴影，且其大小为5px。
2.3 兼容性
虽然CSS3的box-shadow属性已经得到了广泛支持，但为了兼容旧版浏览器，我们仍然需要使用浏览器私有前缀来定义该属性：
/* Safari and Chrome */
-webkit-box-shadow: inset 0 0 5px #f00;
/* Firefox */
-moz-box-shadow: inset 0 0 5px #f00;
/* Opera */
-webkit-box-shadow: inset 0 0 5px #f00;
-o-box-shadow: inset 0 0 5px #f00;
/* IE */
box-shadow: inset 0 0 5px #f00;
3. 圆角边框与阴影效果联合使用
通过将圆角边框和阴影效果组合起来使用，我们可以为元素创建出很棒的视觉效果。
3.1 示例
下面的代码演示了如何使用border-radius属性和box-shadow属性联合使用：
div{
width: 100px;
height: 100px;
background-color: #333;
border-radius: 10px;
box-shadow: 0 0 10px #666;
}
上面的代码会把<div>元素设置为一个灰色的内阴影，并且给它赋予了圆角效果。
总之，通过使用CSS3中的border-radius属性和box-shadow属性，我们可以很容易地为页面元素创建出各种各样的视觉效果，使得页面更加生动有趣！