css

86 阅读 0 评论 57 点赞

我是靠谱客的博主落后猫咪，最近开发中收集的这篇文章主要介绍css，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

、渐变
1、什么是渐变
多种颜色变化的一个过程

分类：
1、线性渐变
2、径向渐变
3、重复渐变(线性,径向)
特点：
1、渐变都有填充方向(线性渐变)
2、色标(颜色，位置)
2、语法
属性：background-image
取值：
1、linear-gradient():线性渐变
2、radial-gradient():径向渐变
3、repeating-linear-gradient():重复线性渐变
4、repeating-radial-gradient():重复径向渐变
3、线性渐变
语法：background-image:linear-gradient(angle,color-point,color-point,…);
1、angle
渐变的方向或角度
取值：
to top : 从下向上填充渐变色
to right:从左向右填充渐变色
to bottom:从上向下填充渐变
to left:从右向左填充渐变色
0deg : 0度->to top
90deg: 90度->to right
180deg:180度->to bottom
270deg:270度->to left
2、color-point
色标：表示颜色及其颜色出现的位置
ex
red 0% : 开始的时候是红色
blue 25%:25%的时候变成蓝色

red 0px : 开始的时候是红色
blue 25px:到25px的位置处，变为蓝色
渐变方向是从上到下

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

<title>渐变(gradients)属性</title>

<style>

 div {

    width: 400px;

     height: 200px;

background: -webkit-linear-gradient(red,blue);

background: -o-linear-gradient(red,blue);

background: -moz-linear-gradient(red,blue);

background: -mos-linear-gradient(red,blue);

background: linear-gradient(red,blue);

 }

</style>

  </head>

  <body>

    <div></div>

  </body>

</html>

4、径向渐变
语法：background-image:radial-gradient([size at position],color-point,color-point);
1、size at position
size:表示圆的半径
position:圆心位置，取值可以为数值，百分比，关键字该参数可以省略的，圆心位置在元素的正中间

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#antzone {
  height: 150px;
  width: 200px;
  background: radial-gradient(red, green, blue); 
}
</style>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

5、重复渐变
语法：
background-image:repeating-linear-gradient(同线性渐变);
6、浏览器兼容性
对不支持渐变的浏览器可以增加浏览器前缀来解决兼容性
Firefox : -moz-
Chrome&Safari :-webkit-
Opera:-o-
IE : -ms-

background-image:linear-gradient();

如果浏览器不支持属性的话，那么前缀就加在属性名称前
ex:
animation,css3中所出的新属性

-webkit-animation:值;
-moz-animation:值;
-o-animation:值;

如果浏览器支持属性但不支持值得花，那么前缀就加在值前

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .title{
            color: #48c0c0;
            -webkit-animation: hue 5s infinite linear;
        }
        @keyframes hue {
            from {
                -webkit-filter: hue-rotate(0deg);
            }
            to {
                -webkit-filter: hue-rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <h1 class="title">颜色渐变动画</h1>
</body>
</html>