zoukankan      html  css  js  c++  java
  • 背景颜色渐变

    背景颜色线性渐变【 linear-gradient】

    语法:

    background:linear-gradient(起点,起点颜色,过度色[可选],终点颜色);

    起点:top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。

    过度色:可以插入多个,表示多种颜色的渐变

    demo

    <style type="text/css" rel="stylesheet">
      .box{
        width: 100px;
        height: 100px;
        margin: 50px auto;
        /*从上之下线性渐变*/
        /*方向,线性渐变开始颜色,线性渐变过度颜色,线性渐变最终颜色,20px表示距某个方向20px开始*/
        background: -moz-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        background: -webkit-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        background: -o-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        background: -ms-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        background: linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        /*根据给定角度线性渐变*/
        background: -moz-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        background: -webkit-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        background: -o-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        background: -ms-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        background: linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        /*从左上角到右下角线性渐变*/
        background: -moz-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
        background: -webkit-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
        background: -o-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
        background: -ms-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
        background: linear-gradient(top right, #0099ff, #ffffff, #00cc00);
      }
    </style>
    
    <div class="box"></div>
  • 相关阅读:
    搭建php环境时解决jpeg6 make: ./libtool:命令未找到
    configure: error: zlib not installed
    南京呼叫中心防火墙配置(备份)
    检查Linux Bash安全漏洞以及各环境修复解决方法
    Linux 内核升级步骤
    CentOS 7没有ifconfig命令处理
    linux kickstart 自动安装
    red hat Linux 使用CentOS yum源更新
    -bash: ./job.sh: /bin/sh^M: bad interpreter: 没有那个文件或目录
    linux LNMP自动安装脚本
  • 原文地址:https://www.cnblogs.com/xiaobaizhiqian/p/8361877.html
Copyright © 2011-2022 走看看