大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Dreamweaver中CSS如何制作径向圆形渐变-创新互联

这篇文章主要介绍了Dreamweaver中CSS如何制作径向圆形渐变,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联建站主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、成都响应式网站建设公司、程序开发、网站优化、微网站、小程序制作等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的做网站、成都网站设计、网站设计、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体。

Dreamweaver设计网页很简单,今天我们就来看看利用CSS来绘制圆形径向渐变的方法,可以通过【 radial-gradient】来实现。

Dreamweaver中CSS如何制作径向圆形渐变

第一种:基础简单渐变

1、我们先建立个网页,并写入

标签,并引入CSS样式。

Dreamweaver中CSS如何制作径向圆形渐变

2、定义IDV的宽和高,然后利用背景渐变来实现渐变【width: 400px; height: 400px;background: radial-gradient(yellow, red);】。

Dreamweaver中CSS如何制作径向圆形渐变

第二种:简单的圆形渐变

通过如下代码也可以实现,几乎和第一种一样。

【width: 400px; height: 400px;background: radial-gradient(circle, yellow, red);】

Dreamweaver中CSS如何制作径向圆形渐变

第三种:指定圆形渐变的起始位置

1、可以通过如下代码实现。

【  width: 400px; height: 400px;background: radial-gradient(circle at 50px 50px, yellow, red);】

Dreamweaver中CSS如何制作径向圆形渐变

2、指定起始位置也可以使用百分比来实现起始位置。

【width: 400px; height: 400px;    background: radial-gradient(circle at 12.5% 25%, yellow, red);】

Dreamweaver中CSS如何制作径向圆形渐变

第四种:指定终止点位置

【width: 400px; height: 400px;    background: radial-gradient(closest-side circle at 50px 50px, yellow, red);】

Dreamweaver中CSS如何制作径向圆形渐变

第五种:指定渐变颜色断点

1、为了方便经验的朋友们观察,加了个边框可以看出效果。

width: 400px; height: 400px;    border: 1px solid silver;    background: radial-gradient(closest-side circle, yellow, orange, red, white);】

Dreamweaver中CSS如何制作径向圆形渐变

感谢你能够认真阅读完这篇文章,希望小编分享的“Dreamweaver中CSS如何制作径向圆形渐变”这篇文章对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,更多相关知识等着你来学习!


本文题目:Dreamweaver中CSS如何制作径向圆形渐变-创新互联
文章来源:http://dzwzjz.com/article/ipgch.html
在线咨询
服务热线
服务热线:028-86922220
TOP