css3怎么实现边框的圆角和阴影

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属性，我们可以很容易地为页面元素创建出各种各样的视觉效果，使得页面更加生动有趣！