html设置背景径向渐变的方法
这篇文章主要介绍了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-corner 最近角
farthest-corner 最远角
实现代码如下:
p{ width:500px; height:300px; margin:40px auto; background:-webkit-radial-gradient(center,closest-corner,red,yellow,green); }
扩展资料:
线性渐变:从一个方向到另一个方向到另一个方向的颜色的变化
标准模式的语法(不添加浏览器前缀):
background:linear-gradient(direction,color-stop1,color-stop2)
说明:direction默认值是to bottom,即从上往下
stop:颜色的分布位置,默认均匀分布(平均分布)
兼容模式的语法(添加浏览器前缀):
background:-webkit-linear-gradient(direction,color-stop1,color-stop2)
说明:direction值不能加to,该值表示颜色从该方向开始渐变,与上面相反
stop:颜色的分布位置,默认均匀分布(平均分布)
渐变方向:前面实现了上下或左右渐变,接下来介绍对角线型渐变
1、to left \ to right \ to top(上下或左右渐变)
2、to left top \ to right bottom(对角线渐变)
3、渐变线角度的变化
例如:标准模式 : 40deg 40度
兼容模式 : 90 - 40deg
线性渐变:颜色的分布(颜色区域大小):
linear-gradient(方向, 颜色1 20%,颜色2 30%,颜色3 )
到20%这个位置仍然是颜色1 出了20% 开始向颜色2渐变
代码如下所示:
div{ width:500px; height:300px; margin:100px auto; background-image: -webkit-linear-gradient(left, red, yellow); }
以上就是html设置背景径向渐变的方法的详细内容了,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎来创新互联行业资讯!
分享标题:html设置背景径向渐变的方法
本文链接:http://myzitong.com/article/iisspc.html