css3圆角边框和边框阴影示例

下面是关于“CSS3圆角边框和边框阴影示例”的完整攻略：

圆角边框

首先，我们来看圆角边框的写法。可以使用border-radius属性来设置元素的边框圆角。这个属性可以取一个或多个长度或百分数值，表示四个角的圆角半径，和box-shadow属性一样，可以用逗号隔开。例如：

div {
  border-radius: 10px;
}

上面的代码会将一个div元素的四个角都设置为10像素的圆角。

除了统一设置四个角的圆角半径外，我们还可以针对每个角单独设置圆角半径。例如：

div {
  border-top-left-radius: 20px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 50px;
}

上面的代码会将一个div元素的四个角的圆角半径分别设置为20像素、30像素、40像素、50像素。

边框阴影

接下来，我们来看边框阴影的写法。可以使用box-shadow属性来设置元素的边框阴影效果。这个属性可以取若干个影响，每个影响可以用逗号隔开。例如：

div {
  box-shadow: 2px 2px 0px #000;
}

上面的代码会在一个div元素的边框周围产生一个2像素偏移的黑色阴影。其中，2px表示水平和垂直偏移量，0px表示模糊半径，#000表示阴影颜色。

除了简单的偏移和颜色设置外，box-shadow属性还可以设置多个阴影效果。例如：

div {
  box-shadow:
    2px 2px 0px #000,
    -2px -2px 0px #fff;
}

上面的代码会同时产生一个黑色的下右偏移阴影和一个白色的上左偏移阴影。

以上就是关于“CSS3圆角边框和边框阴影示例”的完整攻略，希望对你有所帮助！