zoukankan      html  css  js  c++  java
  • css3 Gradient背景

    css3的gradient分为两种:线性渐变(linear)和径向渐变(radial)。

    一、线性渐变linear-gradient

    1、介绍

    linear-gradient([设置方向],[设置开始颜色],[设置多种过度颜色],[设置结束颜色])

    参数:

    第一个参数:指定渐变方向,可以用“角度”的关键字或“英文”来表示:

    第一个参数默认:180deg,等同于“to bottom”。

    后面的颜色至少有2个,即开始颜色和结束颜色。

    2、使用

    a、举例:

    复制代码
    <style type="text/css">
    p{
         300px;
        height: 100px;
        background-image:linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    }
    </style>
    <p>从左到右线性渐变背景</p>
    复制代码

    b、一个非常酷的功能:用渐变制作导航分割线

    background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px; 意思背景使用渐变色,然后不重复,居右,斜线后面的其实是background-size的设置,width 1px,height 15px
     View Code

    效果:

    c、谷歌搜索低调的线性渐变背景

    查看了一个google搜索的代码,写了个例子

     View Code

    二、径向渐变radial-gradient

    待续

    大漠写的css3 gradient

    http://www.w3cplus.com/content/css3-gradient

  • 相关阅读:
    字符串实现变量映射
    纯css实现无限嵌套菜单
    flex布局嵌套之高度自适应
    easy ui 零散技巧
    js高级应用
    前端利器
    css高级应用及问题记录(持续更新)
    兼容性验证方案
    原生js判断元素是否可见
    vue-cli webpack躺坑之旅
  • 原文地址:https://www.cnblogs.com/zhangyuhang3/p/6910515.html
Copyright © 2011-2022 走看看