HTML5全栈开发序列课程 《前端入门》之CSS3新特性 余鹏作品
主要内容 1、浏览器内核 2、CSS3新增属性 盒相关样式 背景 文本属性
一、浏览器内核 所谓内核,就是常驻内存、能够快速响应的那一部分核心代码,非内核代码都 是要用到时再调入内存并执行的. 常见浏览器的内核,一般不外乎微软的IE 内核和webkit内核。
根据不同的内核,一些私有属性的css前缀不一样 Gecko内核 css前缀为"-moz-" 火狐浏览器 Presto内核 css前缀为"-o-" Opera(欧朋) Trident内核 css前缀为"-ms-" IE WebKit内核 css前缀为“-webkit- safari chrome 注:书写css3新增的属性时: 标准的语法(必须放在最后)
二、CSS3新增属性--盒相关样式 还可设置多个阴影,阴影列表由,隔开 1、盒阴影——box-shadow 语法:box-shadow:length1 length2 length3 color; 创建盒内阴影: 语法:box-shadow:length1 length2 length3 length4 color inset ; length1:水平方向的偏移量(必选) length2:垂直方向的偏移量(必选) length3:模糊距离(可选) length4:阴影尺寸(可选) color:阴影颜色(可选) inset:将外部阴影改为内部阴影(可选) 还可设置多个阴影,阴影列表由,隔开
二、 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;
二、 CSS3新增属性--盒相关样式 3、使用图像边框——border-image 值 描述 值 描述 border-image-source 用在边框的图片的路径。 border-image-slice 图片边框向内偏移,用来分解引入的图片,将之拆解成9份,形成一 个九宫格造型。 border-image-slice:10 10 10 10 fill border-image-width 图片边框的宽度。 border-image-outset 边框图像区域超出边框的量。 border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。
二、 CSS3新增属性--盒相关样式 4、box-sizing 值 描述 值 描述 content-box 使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border; border-box 使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设 置了padding和border, 元素的宽度 也不会变).
二、 CSS3新增属性--背景 1、CSS3 background-size 属性 background-size 属性规定背景图片的尺寸。 可用以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高 度。
二、CSS3新增属性--背景 2、 CSS3 background-origin 属性 背景图片可以放置于 content-box、padding-box 或 border-box 区域。
二、CSS3新增属性--背景 3、 CSS3 background-clip属性 background-clip 属性规定背景的绘制区域。 background-clip: border-box|padding-box|content-box; 值 描述 border-box 背景被裁剪到边框盒。 padding-box 背景被裁剪到内边距框。 content-box 背景被裁剪到内容框。 text: 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填 充色之类的遮罩效果
二、CSS3新增属性—背景 4、颜色渐变 Css3提供了创建颜色渐变的方式,在两个或更多的颜色之间进行平滑的过渡 浏览器支持两种颜色的渐变: 线性渐变 径向渐变
二、CSS3新增属性——背景 5、线性渐变 语法: background: linear-gradient(方向或角度,颜色1,颜色2,颜色3,颜色4); 方向或角度 如to left是从左到右,四个方向都可,还可以是 to top right表示往右上渐变 颜色列表: 两个或更多的组合,用逗号分开 颜色表示法:关键字,十六进制,rgb等
二、CSS3新增属性——背景 6、径向渐变 W3C组织从2013年04月开始给径向语法推出新的语法规则: radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);
二、CSS3新增属性——背景 6.1、径向渐变 注意: 1、默认情况下椭圆的大小自动匹配所在的元素的尺寸 2、在参数中我们可以指定渐变的形状:circle(圆形)、ellipse(椭圆形,默认值) 3、渐变的大小可以用长度表示,也可以用百分比表示 4、渐变的圆心所在位置默认为center,还可以用两个数值表示,第一个数值表示的是 圆 心偏移元素左边多少px,第二个值表示圆心偏移元素上边多少px
二、CSS3新增属性——背景 7、重复渐变 重复一个渐变,可以使用: repeating-linear-gradient repeating-radial-gradient 注意:渐变一定要有大小,才可以有重复的效果
二、CSS3新增属性——背景 background-image:url(),url();添加多个背景 注:背景图像的先后顺序(第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示)
二、CSS3新增属性-文本属性 1、使用服务器端字体 语法: Font-face:使用服务器端字体 @font-face{ font-family: webfont; src: url(字体路径); } 选择器{
二、 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:
二、 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
育知同创:yztcedu.com HTML5全栈开发学习QQ群: 556042857