本篇文章给大家带来《css3渐变属性有哪些》，石家庄人才网对文章内容进行了深度展开说明，希望对各位有所帮助，记得收藏本站。

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

CSS 渐变是图像，因此可以使用在 background-image 属性中，并且可以和其他背景图像一起使用。

CSS3 线性渐变

为了创建一个线性渐变，你需要设置一个起始点和一个方向（或一个角度）。然后，你指定沿着这条线的颜色停止，渐变就会在这两个颜色之间平稳过渡。

默认情况下，线性渐变的方向是从上到下的（从起始点到结束点）。为了改变线性渐变的方向，你需要使用方向/角度：

• to bottom
• to top
• to right
• to left
• to bottom right
• to top right
• to bottom left
• to top left
• angle - 用角度值来定义渐变方向，比如 180deg，45deg 等等。

石家庄人才网小编了解到，你还可以使用角度来设置渐变方向。一个角度值是由一个数字表示的，后面跟着 deg。角度是指水平线和渐变线之间的角度，并且以顺时针方向进行测量：

CSS3 径向渐变

径向渐变由其中心定义。默认情况下，径向渐变的中心是 cente

为了创建一个径向渐变，你需要设置它的形状、大小以及颜色停止的位置：

径向渐变 - 形状

径向渐变可以是圆形或椭圆形的：

• circle - 渐变为圆形
• ellipse - 渐变为椭圆形

径向渐变 - 大小

渐变的大小可以是以下几种之一：

• closest-side - 渐变的半径长度为从圆心到其最近边的距离
• closest-corner - 渐变的半径长度为从圆心到其最近角的距离
• farthest-side - 渐变的半径长度为从圆心到其最远边的距离
• farthest-corner - 渐变的半径长度为从圆心到其最远角的距离

CSS3 渐变 - 使用多个背景图像

新的 background-image 属性允许你在一个元素中使用多幅背景图像。如果图像的尺寸和形状不适合，它们会相互层叠，而第一个背景图像将被放置在最顶层。

石家庄人才网小编对《css3渐变属性有哪些》内容分享到这里，如果有相关疑问请在本站留言。