第17章 与背景和边框相关的样式

与背景相关的新增属性

background-clip指定背景的显示范围  background-origin指定绘制背景图像时的起点  background-size指定背景中图像的尺寸  background-break指定内联元素的背景图像进行平铺时的循环方式 在Firefox浏览器需要加“-moz-” Safari浏览器需要加“-webkit-”

background-clip的值有border(背景范围包括边框区域)和padding(背景范围包括padding区域,不包括边框)“-webkit-”“-moz-”

background-origin值有border padding content(从不同部位的左上角开始绘制)“-webkit-”“-moz-”

background-size 宽度 高度,如果想要维持图像的纵横比例,可以将另一个参数设置为auto

background-break值有bounding-box(在整个内联元素中进行平铺) each-box(在每一行中进行平铺) continuous(下一行紧接着上一行),在使用Firefox浏览器时,需要写成“-moz-background-inline-policy”

圆角边框的绘制

border-radius 半径(水平方向) 半径(垂直方向)属性“-webkit-”“-moz-”“-o-”

四个角度都不同:border-top-left-radius  border-top-right-radius  border-bottom-left-radius  border-bottom-left-radius

使用图像边框:border-image:url(路径) A B C D(如果4个值相同,可以只写一个值)属性自动将一幅图片分割成9部分“-webkit-”“-moz-”

border-top-left-image  border-top-right-image  border-bottom-left-image  border-bottom-right-image是没有展示的,相当于盲点,所以有必要将4部分图像进行平铺或拉伸

除了border-width属性来设置边框宽度,还可以border-image:url(路径) A B C D/border-width设置

指定四条边中图像的显示方法border-image:url(路径) A B C D/border-width topbottom leftright  topbottom表示上下  leftright表示左右  可以设置的值为repeat(平铺) stretch(拉伸) round(完整平铺)三种

第18章 CSS3中的变形处理
transform功能
用以实现四种文字或图像的变形处理,旋转 缩放 倾斜 移动“-webkit-”“-moz-”“-o-”
缩放scale(0.5,2),表示水平缩小50%,垂直放大1倍,可以有两个参数前一个为水平,后一个为垂直(2为放大1倍)
倾斜skew(30deg,30deg),水平倾斜30°垂直倾斜30°
移动translate(50px,50px),水平移动30像素,垂直移动30像素
旋转transform:rotate(45deg)顺时针旋转45°
综合运用
-webkit-transform:translate(150px,200px) rotate(45deg) scale(1.5);
不同的书写顺序得到的结果也不同
指定变形的基准点
是以元素的中心点为基准点进行的,使用transform-origin属性改变基准点“-webkit-”“-moz-”“-o-”
transform-origin属性有两个位置,水平和垂直left center right top center bottom
第19章 CSS3中的动画功能
transition:property(哪个属性) duration(多长时间) timing-function(什么方式)“-webkit-”“-moz-”“-o-”
-o-transition:background-color 1s linear;
也可以分开写成类似-o-transition-property:background;形式
同时指定多个平滑过渡-o-transition:background-color 1s linear,color 1s linear;
Animations功能
它与Transitions功能不同在于Transitions指定动画的开始和结束值,之间采用平滑过度,只能实现较简单的动画,Animations则是定义多个关键帧以及定义每个关键帧元素的属性值来实现复杂动画效果
1)开始帧(0%)  2)动画到(40)%时,有一处关键帧  3)动画到(70)%时,有一处关键帧  4)结束帧(100%)
@-webkit-keyframe 关键帧集合名{创建关键帧的代码(包含下列形式的代码)}
40%{本关键帧中的样式代码}
在创建好关键帧集合后,在元素中使用该关键帧的集合
div:hover{
  -webkit-animation-name:关键帧集合名;
  -webkit-animation-duration:5s;
  -webkit-animation-timing-function:linear;
}
实现动画的方式(timing-function)
第20章 布局相关样式
多栏布局
 CSS3之前使用float、position属性时,有时会使浮动的两个div底部不对齐,CSS3中使用column-count属性来使用多栏显示,column-width属性设定每栏的宽度,column-gap设置每栏的间隔,column-rule在栏与栏之间增加间隔线,可以设置颜色宽度等
盒布局
box属性
 
box-flex属性使盒布局变为弹性盒布局,高宽都会变化(相当于auto),在Firefox中-moz-box-flex,Chrome中-webkit-box
改变元素的显示顺序,box-ordinal-group属性“-webkit-”“-moz-”  -moz-box-ordinal-group:1;
改变元素的排列方向,box-orient“-webkit-”“-moz-”vertical(垂直方向排列)horizontal(水平方向)
对多个元素使用box-flex属性时,多个元素都会获得相同的宽高,box-flex后的数值代表(如图)
指定水平方向与垂直方向的对齐方式
使用box-pack属性及box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式
-moz-box-pack  -webkit-pack  -moz-box-align  -webkit-align
 

HTML5与CSS3权威指南.pdf8的更多相关文章

  1. Html5与CSS3权威指南 百度云下载

    Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3

  2. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  3. 【HTML5 4】《HTML5与CSS3权威指南》 step1 导读

    一.教程重点:以 HTML5和CSS3的新功能和新特性 为导向,辅之以 实战型实例页面 二.内容概况: 第1部分:详细讲解HTML5相关知识,包括 各主流浏览器对HTML5的支持情况. HTML5与H ...

  4. HTML5与CSS3权威指南.pdf6

    第11章 获取地理位置信息 HTML5为window.navigator对象新增了一个geolocation属性 取得当前地理位置 void getCurrentPosition(onSuccess, ...

  5. HTML5与CSS3权威指南笔记案例1

    第1章 <!DOCTYPE html> <meta charset = "UTF-8"> <title> Search </title&g ...

  6. HTML5与CSS3权威指南

    第一章:Web时代的变迁 HTML5放心使用的理由: 兼容性:HTML5在老板本的浏览器上也可以正常运行: 实用性:HTML5内部并没有封装什么很复杂的,不切实际的功能,而只是封装了简单实用的功能: ...

  7. 读《HTML5与CSS3权威指南(上册)》笔记

    第二章 1.内容类型:“text/html”.DOCTYPE声明:<!DOCTYPE html>.指定字符编码:<meta charset="utf-8"> ...

  8. HTML5与CSS3权威指南.pdf9

    第21章 Media Queries相关样式 该模块中允许添加媒体查询(media query)表达式,用以指定媒体类型,根据媒体类型来选择使用的样式(显示器.便携设备.电视机) 使用方法@media ...

  9. HTML5与CSS3权威指南.pdf5

    第9章 通信API 跨文档消息传输 HTML5提供了网页文档之间互相接收与发送信息的功能,不仅同源(域+端口号)的Web网页之间可以互相通信,甚至可以实现跨域通信 想要接受从其他窗口发过来的信息,要对 ...

随机推荐

  1. 九度OJ 1107 搬水果 -- 哈夫曼树 2011年吉林大学计算机研究生机试真题

    题目地址:http://ac.jobdu.com/problem.php?pid=1107 题目描述: 在一个果园里,小明已经将所有的水果打了下来,并按水果的不同种类分成了若干堆,小明决定把所有的水果 ...

  2. 【转】Oracle job procedure 存储过程定时任务

    原文:Oracle job procedure 存储过程定时任务 oracle job有定时执行的功能,可以在指定的时间点或每天的某个时间点自行执行任务. 一.查询系统中的job,可以查询视图 --相 ...

  3. 发测试邮件或垃圾邮件node脚本

    npm install nodemailer 执行后,指定目录下会出现node_modules模块,再相同目录下,创建main.js,js代码如下: var nodemailer = require( ...

  4. 《工作型PPT设计之道》培训心得

    参加包翔老师的“工作型PPT设计之道>培训,颇多心得,后来为部门新员工和同组同事做了转化培训,将心得整理成一份PPT讲义,效果颇佳.现将主要心得整理于此.因时间仓促,24条心得有拼凑之嫌,有待今 ...

  5. html5写的一个时钟

    看到的一个html5写的时钟 <!doctype> <html> <head> <script> window.onload=function(){ v ...

  6. Python 学习笔记(1) - 开始

    找一个能看的教程(不用太过于纠结以至于耗费大量时间,很可能还没开始就放弃了. -- 这条要作为新的做事准则放入我的日常了,警惕一开始就追求完美常常会什么也得不到.) 我喜欢看书不爱视频,所以找了这个: ...

  7. Adding the Test API in The ASP.NET Web API Help Page

    1.通过NuGet引用Web API Test Client 引用玩该DLL会生成如下文件: 这里面就是我们的帮助文档界面 2.在项目属性中进行如下设置,勾选XMl文档文件,并设置路径 3.在项目的A ...

  8. C语言中调用Lua

    C语言和Lua天生有两大隔阂: 一.C语言是静态数据类型,Lua是动态数据类型 二.C语言需要程序员管理内存,Lua自动管理内存 为了跨越世俗走到一起,肯定需要解决方案. 解决第一点看上去比较容易,C ...

  9. windows appfabric samples

    http://www.microsoft.com/en-us/download/details.aspx?id=19603 http://msdn.microsoft.com/zh-cn/librar ...

  10. 解决android模拟器太大,小屏幕无法完全显示的问题

    http://hi.baidu.com/conanx/blog/item/05479befd6534d03fdfa3cbb.html 安装上Android模拟器之后,开启一个Android 2.2的模 ...