zoukankan      html  css  js  c++  java
  • CSS3 渐变(Gradients)

    渐变

    渐变色彩在前端开发中经常使用,渐变有从内至外、从外至内、从左至右、对角等方式进行

    CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。

    以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

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

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

    线性渐变相关属性:background-image

    (1)从上至下

    1 .bg {
    2     background-image: linear-gradient(#e66465, #9198e5);
    3 }

    (2)从左至右

    1 .bg {
    2   height: 200px;
    3   background-image: linear-gradient(to right, red , yellow);
    4 }

      (3)对角(左上角->右下角)

    1 .bg {
    2   height: 200px;
    3   background-image: linear-gradient(to bottom right, red, yellow);
    4 }

    径向渐变有时候也需要其中渐变程度的体现

    1  // 径向渐变
    2 .bg{
    3   background: -webkit-gradient(radial,800 450,0,800 450,800,from(#0671E2),to(#0B1634));
    4 }

    也有较为简洁的方向指定渐变

    1 .bg{
    2   background:-webkit-linear-gradient(right,#2375B7,#0B4484);
    3 }
  • 相关阅读:
    一个人事工资模块
    Delete From 带 inner join
    打开SQL AnyWhere *.db数据库
    开启查询IO操作统计
    一个大数据量表访问优化联动下拉框查询优化
    一个简单的配置文件读取类
    MSSQL2005 双机热备说明
    数据库镜像
    GridView + ObjectDatasource 的一个范例代码
    往带自增长列的数据表中导数据
  • 原文地址:https://www.cnblogs.com/liazhimao/p/13826168.html
Copyright © 2011-2022 走看看