html设计渐变的背景图片,html设置背景径向渐变的方法

html设置背景径向渐变的方法

发布时间：2021-06-04 16:16:47

来源：亿速云

阅读：91

作者：栢白

这篇文章主要介绍了html设置背景径向渐变的方法，具有一定借鉴价值，需要的朋友可以参考下。下面就和我一起来看看吧。

在html中，可以使用radial-gradient函数设置径向渐变，只需要在元素background属性里加入“background:radial-gradient(起始位置, 形状,大小, 颜色,颜色,颜色)”即可。

径向渐变：从一个点到四周的颜色的过渡变化。

径向渐变如图所示：

语法：(必须加浏览器前缀)background: radial-gradient(center, shape, size, start-color, ..., last-color);

center：渐变起点的位置，可以为百分比，默认是图形的正中心。

shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。

size:关于径向渐变的大小：

closest-side 最近边

farthest-side 最远边

closest-corn