CSS3背景与渐变

一、CSS3 背景图像区域

background-clip（指定背景绘制区域）

ackground-clip: border-box / padding-box / content-box;

/*没有padding的时候，content-box和padding-box效果一样*/

兼容性：IE9+、FireFox、Chrome、Safari、Opera

二、CSS3 背景图像定位

background-position （背景定位）
background-position: px / % ...;

background-origin（设置元素背景图片的原始起始位置）
background-origin: padding-box|border-box|content-box;
兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera

三、CSS3 背景图像大小

background-size（指定背景图片大小）

background-size: px / % / cover / contain;

/*cover：把背景图片扩展至足够大，以使背景图片完全覆盖区域（即完全不留白）

 contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域（至少满足一边不留白）*/

兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera

四、CSS3 多重背景图像

background-image: url(img1.jpg), url(img2.png);

/*img1放前面，img2放后面*/

五、CSS3 渐变

线性渐变 - 从上到下（默认）
background: linear-gradient(direction, color-stop1, color-stop2, ...);
兼容性：IE10+、FireFox16+（3.6 –moz-内核）、Chrome26+（10.0 –webkit-）、Safari6.1+（5.1 –>webkit-）、Opera12.1+（11.6 –o-）

线性渐变 - 从左到右

background:-webkit-linear-gradient( begin-direction, color-stop1, color-stop2, ...);

background:   -moz-linear-gradient( end-direction, color-stop1, color-stop2, ...);

background:     -o-linear-gradient( end-direction, color-stop1, color-stop2, ...);

background:        linear-gradient(to end-direction, color-stop1, color-stop2, ...);

/*注意webkit是起始方向*/

线性渐变 – 对角

background:-webkit-linear-gradient( begin-level begin-vertical, color-stop1, color-stop2, ...);

background:   -moz-linear-gradient( end-level end-vertical,color-stop1, color-stop2, ...);

background:     -o-linear-gradient( end-level end-vertical,color-stop1, color-stop2, ...);

background:        linear-gradient( to end-level end-vertical,color-stop1, color-stop2, ...);

/*注意webkit是起始方向*/

线性渐变 – 自定义角度

background:-webkit-linear-gradient(angle, color-stop1, color-stop2, ...);  //默认从左往右

background:   -moz-linear-gradient(angle, color-stop1, color-stop2, ...);  //默认从下往上

background:     -o-linear-gradient(angle, color-stop1, color-stop2, ...);  //默认从下往上

background:        linear-gradient(angle, color-stop1, color-stop2, ...);  //默认从下往上（优先级高）

/*angle单位deg*/

线性渐变 – 颜色结点自定义分布

语法：同上，并在颜色值后加上 “空格+百分比” （透明色：transparent）

线性渐变 – 重复渐变

语法：同上，并在linear前加repeating-

径向渐变

background: radial-gradient(center, shape size, start-color, ..., last-color);

/*center默认居中，可不写

center值改为：px / %等可定位圆心位置*/

径向渐变 - 颜色结点均匀分布（默认）

background:-webkit-radial-gradient(color-stop1, color-stop2, ...);

background:   -moz-radial-gradient(color-stop1, color-stop2, ...);

background:     -o-radial-gradient(color-stop1, color-stop2, ...);

background:        radial-gradient(color-stop1, color-stop2, ...);

径向渐变 - 颜色结点自定义分布

语法：与线性同理

径向渐变 – 设置形状

background:-webkit-radial-gradient(shape, color-stop1, color-stop2, ...);

background:   -moz-radial-gradient(shape, color-stop1, color-stop2, ...);

background:     -o-radial-gradient(shape, color-stop1, color-stop2, ...);

background:        radial-gradient(shape, color-stop1, color-stop2, ...);

/*shape的值：

circle —— 圆形

ellipse —— 椭圆（默认）*/

径向渐变 – 尺寸大小（关键字的使用）

background:-webkit-radial-gradient(size, color-stop1, color-stop2, ...);

background:   -moz-radial-gradient(size, color-stop1, color-stop2, ...);

background:     -o-radial-gradient(size, color-stop1, color-stop2, ...);

background:        radial-gradient(size, color-stop1, color-stop2, ...);

/*关键字size说明（相对圆心）

closest-side：最近边

farthest-side：最远边

closest-corner：最近角

farthest-corner：最远角*/

径向渐变 – 重复渐变

语法：与线性同理

IE低版本浏览器的渐变

filter:progid:DXImageTransform.Microsoft.gradient( >StartColorstr='color1',EndColorstr='color2',GradientType=0);

综合案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>综合</title>

    <style type="text/css">

    div {

        width: 800px;

        height: 500px;

        background: #abcdef;

        background-size: 50px 50px;

        background-image:

            -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),

            -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),

            -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),

            -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));

        background-image:

            -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),

            -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),

            -moz-linear-gradient(45deg, transparent 75%, #555 75%),

            -moz-linear-gradient(-45deg, transparent 75%, #555 75%);

        background-image:

            -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),

            -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),

            -o-linear-gradient(45deg, transparent 75%, #555 75%),

            -o-linear-gradient(-45deg, transparent 75%, #555 75%);

        background-image:

            linear-gradient(45deg, #555 25%, transparent 25%, transparent),

            linear-gradient(-45deg, #555 25%, transparent 25%, transparent),

            linear-gradient(45deg, transparent 75%, #555 75%),

            linear-gradient(-45deg, transparent 75%, #555 75%);

    }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

CSS3背景与渐变的更多相关文章

css3背景颜色渐变属性兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+
css3背景颜色渐变属性兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...
从零开始学习前端开发 — 17、CSS3背景与渐变
一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...
css3背景颜色渐变属性
https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...
关于css3背景图片渐变的规则
1. Webkit引擎的CSS3径向渐变语法 Webkit引擎下的老版本语法:-webkit-gradient([<type>],[<position> || & ...
CSS3背景，渐变
1,有利于代码维护,有利于使用debug进行调试打断点.2,后面三个都存在计算,所以分开写最好.背景复合属性最好的写法,background:#abcdef url() no-repeat 50px ...
css3背景颜色渐变
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...
css3基础-选择器+边框与圆角+背景与渐变
Css3选择器相关: section > div直接子元素选择器 div + article相邻兄弟选择器(在元素之后出现) div ~ article通用兄弟选择器(在元素之后出现) 属性选择 ...
CSS3之径向渐变
设置最终形状参数: ellipse circle 设置长半轴和短半轴设置椭圆对称中心设置色标输出代码: radial-gradient(circle closest-side at ce ...
css3的背景颜色渐变@线性渐变
背景颜色渐变之线性渐变语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...

随机推荐

嵌入式OS入门注意事项-同RTX案件：九.关于优先-翻转，继承和天花板
嵌入式OS入门注意事项-同RTX案件:九.关于优先-翻转,继承和天花板涉及当调度优先级,会有很多问题,本文中,优先调度和一些战略的主要问题,以应付. 有几个概念如下:(priority invers ...
WinForm和WPF颜色对象的转换
原文:WinForm和WPF颜色对象的转换版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/huangli321456/article/details ...
Harden the Hacker Thinking (Updating)
录制自己的最新思考harden过程.通过记录,反射,加强管理,发现缺陷. 等一下design,等一下coding,三十分钟rethinking. 2015-02-26 : 不要在一件事上停留太久: 歇 ...
ThreadPool类(线程池)
原文:ThreadPool类(线程池) CLR线程池并不会在CLR初始化时立即建立线程,而是在应用程序要创建线程来运行任务时,线程池才初始化一个线程.线程池初始化时是没有线程的,线程池里的线程的初始化 ...
C# 操作XML文档使用XmlDocument类方法
W3C制定了XML DOM标准.很多编程语言中多提供了支持W3C XML DOM标准的API.我在之前的文章中介绍过如何使用Javascript对XML文档进行加载与查询.在本文中,我来介绍一下.Ne ...
doesn't contain a valid partition table 解决方法
输入 fdisk -l 可以看到输入 fdisk /dev/xvdb 跟着向导一步步做下去(如果不知道该输入什么,就输入“m”并回车,可以打印出菜单): Command (m for help): ...
System.Data.SQLite 中GUID的处理
原文:System.Data.SQLite 中GUID的处理项目中正好用到System.Data.SQLite,在手持上使用这个数据库,因为要做数据同步,所以表中的主键都是Guid的数据类型. 在数 ...
Capsule Network
Capsule Network最大的特色在于vector in vector out & 动态路由算法. vector in vector out 所谓vector in vector out ...
高斯判别分析模型（ Gaussian discriminant analysis）及Python实现
高斯判别分析模型( Gaussian discriminant analysis)及Python实现 http://www.cnblogs.com/sumai 1.模型高斯判别分析模型是一种生成模型 ...
Linux下C/C++帮助手册安装方法
1. 安装C的帮助手册如果你使用的Linux发行版, 默认没有安装C语言的库函数MAN手册, 使用下面的方法解决: # sudo apt-get install manpages # sudo a ...

CSS3背景与渐变

一、CSS3 背景图像区域

二、CSS3 背景图像定位

background-position （背景定位）

background-origin（设置元素背景图片的原始起始位置）

三、CSS3 背景图像大小

四、CSS3 多重背景图像

五、CSS3 渐变

线性渐变 - 从上到下（默认）

线性渐变 - 从左到右

线性渐变 – 对角

线性渐变 – 自定义角度

线性渐变 – 颜色结点自定义分布

线性渐变 – 重复渐变

径向渐变

径向渐变 - 颜色结点均匀分布（默认）

径向渐变 - 颜色结点自定义分布

径向渐变 – 设置形状

径向渐变 – 尺寸大小（关键字的使用）

径向渐变 – 重复渐变

IE低版本浏览器的渐变

综合案例：

CSS3背景与渐变的更多相关文章

随机推荐

热门专题