zoukankan      html  css  js  c++  java
  • CSS3的radialgradient(径向渐变)

    所谓径向渐变,如图下,类似光晕

    语法:

    radial-gradient(
      [
        [渐变大小]?
        [ at 渐变圆心坐标]?
      ,]?
      颜色[ 开始位置]
      [,颜色[ 开始位置]]+
    );

    例1:

    .ball{
          width:200px;height:200px;
          background:-webkit-radial-gradient(#CC3,#3F9,#06C);
    }

    效果如图下:

    例2:

    div{
          width:200px;height:200px;
          margin:10px;
    }
    .first{
        background:-webkit-radial-gradient(#CC3,#3F9 40%,#06C);
    }
    .second{
        background:-webkit-radial-gradient(35px 35px,#CC3,#3F9 40%,#06C);
    }
    .third{
        background:-webkit-radial-gradient(0px 0px,#CC3,#3F9 40%,#06C);
    }

    此外,需要增加颜色可直接在后面怼,至于颜色后面的百分可以用来控制色域范围~

    这期就到这,我是Daniel

    欢乐的时光如此短暂,好了,今天就到这里了,觉得不错麻烦点个赞,danielwu的前端之路有你相伴,咱们下期再见!
  • 相关阅读:
    GUI编程之贪吃蛇
    GUI编程之Swing
    Java学习笔记01
    软件测试之使用jmeter进行压力测试
    GitHub以及Git安装的使用
    Axure RP介绍
    结对编程之四则运算
    随心开始
    JAVA入门之简介
    input之File对象的简单介绍
  • 原文地址:https://www.cnblogs.com/realdanielwu/p/6289670.html
Copyright © 2011-2022 走看看