HTML5全栈开发序列课程 《前端入门》之CSS3新特性 余鹏作品.

Presentation on theme: "HTML5全栈开发序列课程 《前端入门》之CSS3新特性 余鹏作品."— Presentation transcript:

1 HTML5全栈开发序列课程 《前端入门》之CSS3新特性 余鹏作品

2 主要内容 1、浏览器内核 2、CSS3新增属性 盒相关样式 背景 文本属性

3 一、浏览器内核 所谓内核，就是常驻内存、能够快速响应的那一部分核心代码，非内核代码都 是要用到时再调入内存并执行的.
常见浏览器的内核，一般不外乎微软的IE 内核和webkit内核。

4 根据不同的内核，一些私有属性的css前缀不一样
Gecko内核　　  css前缀为"-moz-"　　 火狐浏览器 Presto内核 　　 css前缀为"-o-"             Opera(欧朋) Trident内核　　 css前缀为"-ms-"           IE WebKit内核　　 css前缀为“-webkit safari chrome 注：书写css3新增的属性时: 标准的语法（必须放在最后)

5 二、CSS3新增属性--盒相关样式 还可设置多个阴影，阴影列表由,隔开 1、盒阴影——box-shadow
语法：box-shadow:length1 length2 length3 color; 创建盒内阴影： 语法：box-shadow：length1 length2 length3 length4 color inset ; length1:水平方向的偏移量（必选） length2:垂直方向的偏移量（必选） length3:模糊距离（可选） length4:阴影尺寸（可选） color:阴影颜色（可选） inset:将外部阴影改为内部阴影（可选） 还可设置多个阴影，阴影列表由,隔开

6 二、 CSS3新增属性--盒相关样式 2、圆角——border-radius * border-top-left-radius:左上圆角半径
单个圆角的设置 * border-top-left-radius:左上圆角半径 * border-top-right-radius:右上圆角半径 * border-bottom-right-radius:右下圆角半径 * border-bottom-left-radius:左下圆角半径 border-top-left-radius:50px; border-top-left-radius:50px 100px; 注：记住当某个角为一个值时，确定是一个圆，当使用两个值确定一个椭圆 2、圆角——border-radius 语法： border-radius：[ <length> | <percentage> ] 默认值：0 取值： <length>： 用长度值设置对象的圆角半径长度。不允许负值 <percentage>： 用百分比设置对象的圆角半径长度。不允许负值, 水平与垂直相同时: border-radius:10px; border-radius:10px 20px; 水平与垂直不相同时: border-radius:10px/20px; border-radius:10px 20px/20px 30px;

7 二、 CSS3新增属性--盒相关样式 3、使用图像边框——border-image 值 描述
值 描述 border-image-source 用在边框的图片的路径。 border-image-slice 图片边框向内偏移，用来分解引入的图片，将之拆解成9份，形成一 个九宫格造型。 border-image-slice: fill border-image-width 图片边框的宽度。 border-image-outset 边框图像区域超出边框的量。 border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。

8 二、 CSS3新增属性--盒相关样式 4、box-sizing 值 描述
值 描述 content-box 使用此值时, 盒模型的组成模式是, 元素宽度 = content padding + border; border-box 使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设 置了padding和border, 元素的宽度 也不会变).

9 二、 CSS3新增属性--背景 1、CSS3 background-size 属性 background-size 属性规定背景图片的尺寸。
可用以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高 度。

10 二、CSS3新增属性--背景 2、 CSS3 background-origin 属性
背景图片可以放置于 content-box、padding-box 或 border-box 区域。

11 二、CSS3新增属性--背景 3、 CSS3 background-clip属性 background-clip 属性规定背景的绘制区域。
background-clip: border-box|padding-box|content-box; 值 描述 border-box 背景被裁剪到边框盒。 padding-box 背景被裁剪到内边距框。 content-box 背景被裁剪到内容框。 text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填 充色之类的遮罩效果

12 二、CSS3新增属性—背景 4、颜色渐变 Css3提供了创建颜色渐变的方式，在两个或更多的颜色之间进行平滑的过渡 浏览器支持两种颜色的渐变：
线性渐变 径向渐变

13 二、CSS3新增属性——背景 5、线性渐变 语法：
background: linear-gradient(方向或角度,颜色1,颜色2,颜色3,颜色4); 方向或角度 如to left是从左到右，四个方向都可，还可以是 to top right表示往右上渐变 颜色列表： 两个或更多的组合，用逗号分开 颜色表示法：关键字，十六进制，rgb等

14 二、CSS3新增属性——背景 6、径向渐变 W3C组织从2013年04月开始给径向语法推出新的语法规则：
radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);

15 二、CSS3新增属性——背景 6.1、径向渐变 注意： 1、默认情况下椭圆的大小自动匹配所在的元素的尺寸
2、在参数中我们可以指定渐变的形状：circle(圆形)、ellipse(椭圆形，默认值) 3、渐变的大小可以用长度表示，也可以用百分比表示 4、渐变的圆心所在位置默认为center,还可以用两个数值表示，第一个数值表示的是 圆 心偏移元素左边多少px，第二个值表示圆心偏移元素上边多少px

16 二、CSS3新增属性——背景 7、重复渐变 重复一个渐变，可以使用： repeating-linear-gradient
repeating-radial-gradient 注意：渐变一定要有大小，才可以有重复的效果

17 二、CSS3新增属性——背景 background-image:url(),url();添加多个背景
注:背景图像的先后顺序(第一个图片是定位在元素最上面的背景，后面的背景图片依次在它下面显示)

18 二、CSS3新增属性-文本属性 1、使用服务器端字体 语法： Font-face:使用服务器端字体 @font-face{
font-family: webfont; src: url(字体路径); } 选择器{

19 二、 CSS3新增属性-文本属性 overflow:hidden white-space:nowrap;
2、以省略号形式显示 overflow:hidden white-space:nowrap; text-overflow:ellipsis; text-overflow 语法：text-overflow: clip|ellipsis|string; 说明：属性规定当文本溢出包含元素时发生的事情 clip 无省略号 ellipsis 省略号 overflow 语法： overflow:hidden|scroll|auto|visible 说明：对于盒子中容纳不下的内容的显示方法 Overflow-x: Overflow-y:

20 二、 CSS3新增属性-文本属性 3、text-shadow:文字添加阴影 例如： h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊的距离。 color 可选。阴影的颜色。 例如： 元素{ text-shadow: 15px 15px 5px #000 } text-shadow: 15px 15px 5px #000, 20px 20px 5px #000

21 育知同创：yztcedu.com HTML5全栈开发学习QQ群：