• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

css3 gradients

css3手册 薛 陈磊 565次浏览 0个评论 扫描二维码

css3中的渐变可以使两个或多个制定颜色之间平滑的过度,在这之前,网页中要展现渐变颜色要是用图片,现在,通过使用CSS3渐变,可以减少加载图片的负荷,也就是说,使用css3渐变颜色,所呈现出的样子是浏览器计算css样式展现的,这种场景在大背景渐变颜色的使用中,可以减少加载大图片或分割图片(注意css3渐变在ie9及9以下的浏览器中是不支持的);

css3渐变定义两种类型的渐变:

  1. Linear Gradients

  2. Radial Gradients

Linear Gradinent线型渐变

要创建线性渐变,必须要至少定义两个色点,开始颜色结束颜色或者还有中间的渐变色。还可以设置起始点和方向(或角度)以及渐变效果;来看一个渐变案例,从红色渐变到黄色:

css3 gradients

style code:

#grad {
    background: red; /* 供不支持渐变的浏览器使用 */
    background: -webkit-linear-Gradient(red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-Gradient(red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-Gradient(red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-Gradient(red, yellow); /* Standard syntax */
}

很好理解,设置好最初、最末颜色就好了,加上各浏览器前缀;可以看到默认是从上到下的,也可以设置方向:

css3 gradients

style code:

#grad {
  background: red; /* 供不支持渐变的浏览器使用 */
  background: -webkit-linear-Gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-Gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-Gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-Gradient(to right, red , yellow); /* Standard syntax */
}

斜对角到右下方也可以,style code:

#grad {
  background: red; /* 供不支持渐变的浏览器使用 */
  background: -webkit-linear-Gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-Gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-Gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-Gradient(to bottom right, red, yellow); /* Standard syntax */
}

除了对角线,也可以定义角度来控制渐变的走向,语法是background: linear-gradient(angle, color-stop1, color-stop2);注意这里的角度是以水平线正x轴开始算的,正角度顺时针旋转,负角度逆时针旋转,下面是示例:

css3 gradients

style code:

#grad {
  background: red; /* 供不支持渐变的浏览器使用 */
  background: -webkit-linear-Gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-Gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-Gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-Gradient(-90deg, red, yellow); /* Standard syntax */
}

示例中给的都是简单的双色,渐变可以加上很多颜色,语法是 background: linear-gradient(color-stop1, color-stop2, color-stop3…),并且可以配合透明度使用;

Radial Gradients 径向渐变:

以上的例子都是线性渐变,即只有一个方向,使用css3中的径向渐变可以展现更炫的效果,语法是:background: radial-gradient(shape size at position, start-color, …, last-color);发散的中心是元素的中心,即从元素中间开始像四周渲染:

css3 gradients

style code:

#grad {
  background: red; /* 供不支持渐变的浏览器使用 */
  background: -webkit-radial-Gradient(circle, red, yellow, green); /* Safari */
  background: -o-radial-Gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
  background: -moz-radial-Gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
  background: radial-Gradient(circle, red, yellow, green); /* Standard syntax */
}


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明css3 gradients
喜欢 (0)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端Coder,中二非文艺闷骚少年,喜欢动漫、历史、暗荣三国志和游山玩水,关注互联网发展,期待遇到更多小伙伴一起吹水玩耍;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址