浅析几个CSS3常用功能的写法

一、圆角边框（border-radius）

border-radius属性用来设置元素的圆角。可以针对一个元素的四个角分别设置圆角半径，也可以设置整个元素的圆角半径。其语法如下：

selector {
  border-radius: 参数1 参数2 参数3 参数4;
}

其中，参数1-参数4表示四角的半径，如果只有一个参数，其值将应用于四个角，如果有两个参数，第一个参数应用于左上角和右下角，第二个参数应用于右上角和左下角。

示例代码：

将一个button的四个角设置为20px的圆角：

button {
  border-radius: 20px;
}

将一个 div 的左上角和右下角设置为 20px，右上角和左下角设置为 50px 的圆角：

div {
  border-radius: 20px 50px 20px 50px;
}

二、渐变背景色（gradient）

gradient属性是一种生成渐变效果的方法，可以将一种颜色逐渐渲染成另一种颜色。其语法如下：

selector {
  background: linear-gradient(方向, 起始颜色, 结束颜色);
}

其中，方向表示渐变的方向，可以是角度或关键词（如to top、to bottom等），起始颜色表示渐变的初始颜色，结束颜色表示渐变的结束颜色。

示例代码：

将一个div设置为从左上角到右下角渐变的渐变色：

div {
  background: linear-gradient(to bottom right, red, blue);
}

三、文本阴影（text-shadow）

text-shadow属性用来给文本添加阴影效果。其语法如下：

selector {
  text-shadow: 横向偏移量 纵向偏移量 模糊半径 阴影颜色;
}

其中，横向偏移量表示阴影相对于文本的水平距离，纵向偏移量表示阴影相对于文本的垂直距离，模糊半径表示阴影的模糊程度，阴影颜色表示阴影的颜色。

示例代码：

将一个文本添加黑色阴影效果：

p {
  text-shadow: 2px 2px 5px black;
}

将一个文本添加红色阴影效果：

p {
  text-shadow: 0 0 10px red;
}

以上是三种常用的CSS3功能的用法。这些功能可以让我们的网页更加生动有趣。