CSS3渐变效果

CSS3 定义了两种类型的渐变(gradients):

  • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
  • 径向渐变(Radial Gradients)- 由它们的中心定义
浏览器支持情况

语法:

background: linear-gradient(direction, color-stop1, color-stop2, ...);
    height: 200px;
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法(必须放在最后) */
效果图
    height: 200px;
    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /* 标准的语法(必须放在最后) */
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平...
    鹿守心畔光阅读 3,157评论 0 3
  • CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平...
    ilkswiss阅读 3,398评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 5,570评论 0 7
  • 原理 渐变色是CSS3新增属性,可以实现很多特殊效果。以前只能使用图片实现的效果,现在用渐变色也可以实现了。 li...
    jdzhangxin阅读 7,557评论 0 1
  • Kimi和璐璐,鬼鬼和潘帅、蔡唸和熊猫、梦辰和王子,他们一行人一起在吃完酒店的早餐之后,便一同出去游玩了。 梦辰那...
    石思琳阅读 2,944评论 0 6