HTML5与CSS3权威指南.pdf8
第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(完整平铺)三种







HTML5与CSS3权威指南.pdf8的更多相关文章
- Html5与CSS3权威指南 百度云下载
Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- 【HTML5 4】《HTML5与CSS3权威指南》 step1 导读
一.教程重点:以 HTML5和CSS3的新功能和新特性 为导向,辅之以 实战型实例页面 二.内容概况: 第1部分:详细讲解HTML5相关知识,包括 各主流浏览器对HTML5的支持情况. HTML5与H ...
- HTML5与CSS3权威指南.pdf6
第11章 获取地理位置信息 HTML5为window.navigator对象新增了一个geolocation属性 取得当前地理位置 void getCurrentPosition(onSuccess, ...
- HTML5与CSS3权威指南笔记案例1
第1章 <!DOCTYPE html> <meta charset = "UTF-8"> <title> Search </title&g ...
- HTML5与CSS3权威指南
第一章:Web时代的变迁 HTML5放心使用的理由: 兼容性:HTML5在老板本的浏览器上也可以正常运行: 实用性:HTML5内部并没有封装什么很复杂的,不切实际的功能,而只是封装了简单实用的功能: ...
- 读《HTML5与CSS3权威指南(上册)》笔记
第二章 1.内容类型:“text/html”.DOCTYPE声明:<!DOCTYPE html>.指定字符编码:<meta charset="utf-8"> ...
- HTML5与CSS3权威指南.pdf9
第21章 Media Queries相关样式 该模块中允许添加媒体查询(media query)表达式,用以指定媒体类型,根据媒体类型来选择使用的样式(显示器.便携设备.电视机) 使用方法@media ...
- HTML5与CSS3权威指南.pdf5
第9章 通信API 跨文档消息传输 HTML5提供了网页文档之间互相接收与发送信息的功能,不仅同源(域+端口号)的Web网页之间可以互相通信,甚至可以实现跨域通信 想要接受从其他窗口发过来的信息,要对 ...
随机推荐
- 九度OJ 1107 搬水果 -- 哈夫曼树 2011年吉林大学计算机研究生机试真题
题目地址:http://ac.jobdu.com/problem.php?pid=1107 题目描述: 在一个果园里,小明已经将所有的水果打了下来,并按水果的不同种类分成了若干堆,小明决定把所有的水果 ...
- 【转】Oracle job procedure 存储过程定时任务
原文:Oracle job procedure 存储过程定时任务 oracle job有定时执行的功能,可以在指定的时间点或每天的某个时间点自行执行任务. 一.查询系统中的job,可以查询视图 --相 ...
- 发测试邮件或垃圾邮件node脚本
npm install nodemailer 执行后,指定目录下会出现node_modules模块,再相同目录下,创建main.js,js代码如下: var nodemailer = require( ...
- 《工作型PPT设计之道》培训心得
参加包翔老师的“工作型PPT设计之道>培训,颇多心得,后来为部门新员工和同组同事做了转化培训,将心得整理成一份PPT讲义,效果颇佳.现将主要心得整理于此.因时间仓促,24条心得有拼凑之嫌,有待今 ...
- html5写的一个时钟
看到的一个html5写的时钟 <!doctype> <html> <head> <script> window.onload=function(){ v ...
- Python 学习笔记(1) - 开始
找一个能看的教程(不用太过于纠结以至于耗费大量时间,很可能还没开始就放弃了. -- 这条要作为新的做事准则放入我的日常了,警惕一开始就追求完美常常会什么也得不到.) 我喜欢看书不爱视频,所以找了这个: ...
- Adding the Test API in The ASP.NET Web API Help Page
1.通过NuGet引用Web API Test Client 引用玩该DLL会生成如下文件: 这里面就是我们的帮助文档界面 2.在项目属性中进行如下设置,勾选XMl文档文件,并设置路径 3.在项目的A ...
- C语言中调用Lua
C语言和Lua天生有两大隔阂: 一.C语言是静态数据类型,Lua是动态数据类型 二.C语言需要程序员管理内存,Lua自动管理内存 为了跨越世俗走到一起,肯定需要解决方案. 解决第一点看上去比较容易,C ...
- windows appfabric samples
http://www.microsoft.com/en-us/download/details.aspx?id=19603 http://msdn.microsoft.com/zh-cn/librar ...
- 解决android模拟器太大,小屏幕无法完全显示的问题
http://hi.baidu.com/conanx/blog/item/05479befd6534d03fdfa3cbb.html 安装上Android模拟器之后,开启一个Android 2.2的模 ...