CSS3秘笈复习:第八章
一、背景的所有属性:
属性 | 作用 | 可选项 |
1.background-image | 定义一张图片 | url(...) |
2.background-repeat | 控制重复 | no-repeat | repeat-X | repeat-Y |
3.background-position | 固定图片位置 | center | top|left | right |
4.background-attachment | 固定图片位置 | scroll | fixed |
5.background-origin | 调整图片起点 | border-box | padding-box | content-box |
6.bcakground-clip | 限制背景图片的显示区域 | border-box | padding-box | content-box |
7.background-size | 控制背景图片尺寸 | 精确值 | contain | cover | |
二、渐变色背景:
1.线性渐变:
例如:创建一种从左边以黑色开始到元素最右边以白色结束的线性渐变:
background-image:linear-gradient(left,black,white);
还可以使用一个程度值表示渐变的方向。例如:
background-image:linear-gradient(45deg , rgb( 0 , 0 , 0) , rgb( 204 , 204 , 204) );
2.径向渐变:
例如:
background-image:radial-gradient(red , blue );
创建了一个适合元素高度和宽度的椭圆形,红色到蓝色的渐变。
添加关键字circle还可以创建出圆形的渐变。
background-image:radial-gradient(circle , red , blue);
为了指明渐变的尺寸,可以使用以下4个关键字之一:
(1)closest-side:渐变从中心点一直延伸到离中心点最近的那一边。
(2)closest-corner:用于测量渐变的宽度。
(3)farthest-side:用于测量圆形的半径,从它的中间点到元素最远的那一边的距离。
(4)farthest-corner:用于测量原形的半径,从它的中间点到元素最远角的距离。
CSS3秘笈复习:第八章的更多相关文章
- CSS3秘笈:第八章
给网页添加图片 1. 常用来处理图片的CSS属性: (1) border(边框):给图片添加边框. (2) padding(填充):边框和图片之间填充空间. (3) float ...
- CSS3秘笈复习:十三章&十四章&十五章&十六章&十七章
第十三章 1.在使用浮动时,源代码的顺序非常重要.浮动元素的HTML必须处在要包围它的元素的HTML之前. 2.清楚浮动: (1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮 ...
- CSS3秘笈复习:第十一章
1.text-align与vertical-align: text-align控制水平方向的定位,关键字是left.right.center和justify. vertical-align控制垂直方向 ...
- CSS3秘笈复习:第九章&第十章
第九章 1.和链接有关的伪类: (1):link,未访问过的链接 (2):visited,已访问过的链接 (3):hover,鼠标悬停链接 (4):active,单击链接时 这四种方式一定要严格按上面 ...
- CSS3秘笈复习:第七章
1.边距冲突: 当元素的bottom margin碰到另一个元素的top margin可能会产生一些怪异的计算,浏览器会忽略小的那个值而使用大的值. 2.边距折叠: 假设要在警告框里插入一个标题,并且 ...
- CSS3秘笈复习:第六章
第六章 1.文本大写化: text-transform:uppercase; 另外三种选项是:lowercase或capitalize以及none. 2.文本修饰: text-decoration:u ...
- CSS3秘笈复习:第一章&第二章&第三章
第一章: 1.<cite>标签不仅可以将网页设置为斜体,还能给标题做上标记,使它便于被搜索引擎搜索到. 第二章: 1.import指令链接样式表: CSS本身有一种添加外部样式的方法:@i ...
- CSS3秘笈第三版涵盖HTML5学习笔记13~17章
第13章,构建基于浮动的布局 使用的是float(浮动)属性 注:float:none值将取消所有浮动,通常只用来取消元素中已经应用的浮动. 切记:不需要给正文的div设计宽度,即使设计成固定宽度也不 ...
- CSS3秘笈第三版涵盖HTML5学习笔记9~12章
第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...
随机推荐
- Activity和Fragment之间解耦
看鸿洋博客:http://blog.csdn.net/lmj623565791/article/details/42628537,整理下一些关键点 public class ContentFragme ...
- liunx服务器常见监控指标
1. CPU Utilization 英文翻译就是CPU的利用率75%以上就比较高了(也有说法是80%或者更高).有的博客上说除了这个指标外,还要结合Load Average和Context Swit ...
- UIView类绘图出现错误提示
一:问题: Jan 16 15:49:53 CUBOT Band Ⅲ[2082] <Error>: CGContextSetLineWidth: invalid context 0x0. ...
- U3D简单得换装技术
四个类完成,前提是 资源得名字配合 UI按钮点击响应类 using UnityEngine; using System.Collections; public class ButtonClickHan ...
- xtrabackup在线备份及还原
xtrabackup下载https://www.percona.com/downloads/XtraBackup/LATEST/xtrabackup文档https://www.percona.com/ ...
- Jmeter之录制脚本
目前,思路:先录制→再压测. [一]录制的准备: 第一种:直接的模板(¬_¬) [1]File→Templates [2]看见Select Template→Recording→create [3]好 ...
- PDF转换成Txt
我的弱智想法是所有能转换成PDF的文件,就都用PDF预览,上传成功后开启一个线程把文档转换成PDF,PDF再转换成txt. 目的是把txt插入索引进行全文检索. 调用的时候 string filePa ...
- Sublime Text3下如何快速搭建开发环境
安装好Sublime Text3之后,简单几步就可以搭建一个好用的开发环境. sublime的设置包括自定义设置以及插件系统. 打开菜单Preferences -> Settings,编辑自定义 ...
- 各类数据库url
msql: jdbc:mysql://127.0.0.1:3306/databaseName ms-sql jdbc:microsoft:sqlserver://127.0.0.1:1433;Data ...
- CentOS6.5部署L2TP over IPSec
一.环境介绍: 1.CentOS 6.5 (要求双网卡做软路由,如果只是做VPN可以单网卡) a.外网IP: b.内网IP: 2.Window 10 主机一台做为一台内网测试软路由使用: a.内网IP ...