知识分享

网站设计的CSS3 渐层特效教学

发表日期:2020-9-11 17:39:38 文章编辑: 浏览次数:61

CSS3 渐层特效教学

在做网页设计时,如果要使用渐层的背景,通常会使用的做法是利用软体将整个背景制作出来,例如左边那样,是做好之后再插入到网页中的,现在新的CSS3出来了之后,可以直接使用语法就产生一模一样的背景。

CSS3 渐层特效

什么?你说你不知道CSS 3的语法吗?没关系,可以使用下面的网站,只要点一点拉一拉,他会自动生成个浏览器对应的CSS 3的语法,再直接套用就可以拉。

网站1:Ultimate CSS Gradient Generator
网站2:CSS Gradient Background Maker

  不过...有点遗憾的事情是,到小编写这篇文章为止,最新的IE 9.0,还是没有办法完整支援CSS 3的渐层效果,所以在产生的CSS 3的语法之后,可以利用之前提过的CSS HACK,让IE系列的浏览器使用原本的方法呈现,不过从网站产生的语法注解中,看到了IE 10的踪影,让我们期待一下IE 10可以对CSS 3.0有更完整的支援。

  左边的是使用CSS的语法产生的,不过如果读者你是用IE浏览器的话,恩你应该会看到一块空白,这个是因为IE还没有完全支援,请换个浏览器来看看,你就会看到有个用CSS 产生的渐层圆圈在旁边的。

语法

/* IE10 */
background-image: -ms-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Opera */
background-image: -o-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center center, 0, center center, 143, color-stop(0, #00A3EF), color-stop(1, #FFFFFF));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Proposed W3C Markup */
background-image: radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);

这边说明一下圆形语法,各个浏览器的语法稍稍有点不同,不过大致上如下面的规则:

radial-gradient( 圆心位置,形状形状参数,颜色颜色停止位置,颜色颜色停止位置...)

  • radial-gradient:表示要使用的是圆形渐层。
  • 圆心位置:起始位置,例如上面的范例写的是center,表示从div的中间开始,指定的方法就和一般我们在设定CSS background的方法一样。
  • 形状:circle(正圆) | ellipse(椭圆) ,可省略,预设值是ellipse
  • 形状参数:closest-side | closest-corner | farthest-side | farthest-corner | contain | cover,可省略,预设值是cover
    1. closest-side:渐变的半径长度为从圆心到离圆心最近的边。
    2. closest-corner:渐变的半径长度为从圆心到离圆心最近的角。
    3. farthest-side:渐变的半径长度为从圆心到离圆心最远的边。
    4. farthest-corner:渐变的半径长度为从圆心到离圆心最远的角。
    5. contain:包含,渐变的半径长度为从圆心到离圆心最近的点。类似于closest-side。
    6. cover:覆盖,渐变的半径长度为从圆心到离圆心最远的点。类似于farthest-corner。
  • 颜色:颜色就如同本来CSS的指定颜色方法。
  • 颜色停止位置:颜色停止的位置,可用长度或百分比显示。


标签: 网站设计 CSS
将文章分享到..
相关新闻
全新新闻
随机新闻
最新网站设计案例
Hi,我来帮您!