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 ...
随机推荐
- C#调用JS
cmd调用phantomjs 官方资料:http://phantomjs.org/quick-start.html 手动执行 从官方下载phantomjs.exe,拷贝它与要执行的js同目录打开cmd ...
- WPF依赖属性对内存的使用方式
WPF允许对象在创建时候并不包含存储数据的空间,只保留在用到时获取数据默认值,借用其他对象数据或者实时分配空间的能力
- python socket 客服端服务端编程
客服端编程 import socket try: s = socket.socket(socket.AF_INET, socket.SOCK_STREAM) except socket.error a ...
- UBUTUN 通过蓝牙连接Hoary和诺基亚手机
通过蓝牙连接Hoary和诺基亚手机 这个how to已经用Hoary.诺基亚6630和一个道尔芯片(Dongle)蓝牙(Usb蓝牙)测试过了.通过这个How to,你可以:-通过蓝牙,从你的电脑发送文 ...
- C#高性能大容量SOCKET并发(七):协议字符集
原文:C#高性能大容量SOCKET并发(七):协议字符集 UTF-8 UTF-8是UNICODE的一种变长字符编码又称万国码,由Ken Thompson于1992年创建.现在已经标准化为RFC 362 ...
- Qt5---ftp上传功能(可直接克隆某个小模块,查看QT下FTP的socket原理)
http://blog.csdn.net/freeape/article/details/52802163
- 为新项目添彩的 10+ 超有用 JavaScript 库
快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...
- QTcpSocket类和QTcpServer类
QTcpSocket 详细描述:QTcpSocket 类提供一个TCP套接字TCP是一个面向连接,可靠的的通信协议,非常适合于连续不断的数据传递QTcpSocket 是QAbstractSocket类 ...
- SpringMVC使用MultipartFile文件上传,多文件上传,带参数上传
一.配置SpringMVC 二.单文件与多文件上传 三.多文件上传 四.带参数上传 一.配置SpringMVC 在spring.xml中配置: <!-- springmvc文件上传需要配置的节点 ...
- 配置QSslConfiguration让客户端程序跳过本地SSL验证
大家下午好哦.今天我们在重新制作我们萌梦聊天室的时候,出现了这样的问题.那就是我们的客户端能够对qtdream.com服务器进行登录,但是不能对localhost服务器(也就是本机啦)进行登录.这究竟 ...