目录
2、设置背景定位的原点 background-origin(原点，起点)
3、background-clip设置背景区域clip(裁切)
text-shadow，可分别设置偏移量、模糊度、颜⾊（可设透明度）。
6 设置的图⽚将会被“切割”成九宫格形式，然后进⾏设置。如下图
HTML5CSS3-补充知识点
1.背景
1.背景缩放background-size
background-size 属性规定背景图像的尺⼨
background-size: 背景图⽚宽度 背景图⽚⾼度;
单位： ⻓度|百分⽐|cover|contain;
cover把背景图像扩展⾄⾜够⼤，以使背景图像完全覆盖背景区域。
contain把图像图像扩展⾄最⼤尺⼨，以使其宽度和⾼度完全适应内容区域
2、设置背景定位的原点 background-origin(原点，起点)
所谓的背景原点就是调整背景位置的⼀个参照点. 调整背景图⽚定位的参照原点.
border-box以边框做为参考原点； padding-box以内边距做为参考原点； content-box以内容区做为参考点；
3、background-clip设置背景区域clip(裁切)
border-box裁切边框以内为背景区域；
padding-box裁切内边距以内为背景区域； content-box裁切内容区做 为背景区域；
4、以逗号分隔可以设置多背景
多背景使⽤案例：
2 .使⽤ CSS3盒⼦模型box-sizing
传统模式宽度计算：盒⼦的宽度 = CSS中设置的width + border + padding
CSS3盒⼦模型： 盒⼦的宽度= CSS中设置的宽度width ⾥⾯包含了 border 和 padding
也就是说，我们的CSS3中的盒⼦模型， padding 和 border 不会撑⼤盒⼦了
/*CSS3盒⼦模型*/
box-sizing: border-box;
/*传统盒⼦模型*/
box-sizing: content-box;
移动端可以全部CSS3 盒⼦模型
PC端如果完全需要兼容，我们就⽤传统模式，如果不考虑兼容性，我们就选择 CSS3 盒⼦模型
3 .关于before和after
CSS2中E:before或者E:after，是属于伪类的，并且没有伪元素的概念
CSS3中提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类⾥就不再存在E:before或者 E:after伪类;
4 .颜⾊表示⽅式
⼀种新的颜⾊的HSLA模式，其中的A 表示透明度通道，即可以设置颜⾊值的透明度，相较opacity，它们不具有继承性，即不 会影响⼦元素的透明度。
Hue、Saturation、Lightness、Alpha即HSLA
R、G、B 取值范围0~255 H
⾊调 取值范围0~360，0/360表示红⾊、120表示绿⾊、240表示蓝⾊
S 饱和度 取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度 取值范围0~1
**关于透明度： **
1、opacity只能针对整个盒⼦设置透明度，⼦盒⼦及内容会继承⽗盒⼦的透明度；
2 、transparent 不可调节透明度，始终完全透明RGBA、HSLA可应⽤于所有使⽤颜⾊的地⽅。
5 .⽂本 (shadow阴影)
text-shadow，可分别设置偏移量、模糊度、颜⾊（可设透明度）。
1 .⽔平偏移量 正值向右 负值向左；
2 .垂直偏移量 正值向下 负值向上；
3 .模糊度是不能为负值；
4 .可以有多个影⼦。
案例：浮雕⽂字
6 .边框图⽚
1 简写⽅式
border-image: url("images/border.png") 27/20px round
2 设置边框图⽚的地址.
border-image-source:url(“”);
3 裁剪图⽚，如何去裁切图⽚，浏览器会⾃动去裁剪图⽚.
border-image-slice:27,27,27,27
4 指定边框的宽度.
border-image-width:20px;
5 边框平铺的样式
border-image-repeat: stretch;
①stretch 拉升 ②round会⾃动调整缩放⽐例 ③repeat重复
6 设置的图⽚将会被“切割”成九宫格形式，然后进⾏设置。如下图
“切割”完成后⽣成虚拟的9块图形，然后按对应位置设置背景，
其中四个⻆位置、形状保持不变，中⼼位置⽔平垂直两个⽅向平铺。如下图
7 .渐变
渐变是CSS3当中⽐较丰富多彩的⼀个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图⽚的使⽤ 数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变。
(1)线性渐变 （gradient 变化）
linear-gradient线性渐变指沿着某条直线朝⼀个⽅向产⽣渐变效果。
background:linear-gradient(
to right , //表示⽅向 (left,top,right,left ,也可以使⽤度数)
yellow, //渐变起始颜⾊
green //渐变终⽌颜⾊
);
案例拓展：
background:linear-gradient(to right,red 0%,red 25% , blue 25%,blue 50%, green 50%,green75%, pink 75% ,pink 100% ); //起⽌颜⾊，终⽌颜⾊.
(2)径向渐变 (radial 径向)
radial-gradient径向渐变指从⼀个中⼼点开始沿着四周产⽣渐变效果
background:radial-gradient( 150px at center, yellow, green );
围绕中⼼点做渐变，半径是150px，从⻩颜⾊到绿颜⾊做渐变.
1、必要的元素： a、辐射范围即圆半径 (半径越⼤，渐变效果越⼤) b、中⼼点 即圆的中⼼ (中⼼点的位置是 以盒⼦⾃身) c、渐变起始⾊ d、渐变终⽌⾊
2 \改变中⼼点 background:radial-gradient( 150px at left center, yellow, green ); 以左上⻆为圆的中⼼点 background:radial- gradient( 150px at 0px 0px, yellow, green );
2、关于中⼼点：中⼼位置参照的是盒⼦的左上⻆ 3、关于辐射范围：其半径可以不等，即可以是椭圆
8. ⻓度单位
1 、绝对单位 px
像素是⼀个绝对单位，这⾥，有些⼈可能要说，不是说px是相对单位吗？其实这点并不准确。因为不管如何 设置，像素单位在设备确定之后总是不变的。
2 、其他绝对单位
in 英⼨ ，cm 厘⽶，mm 毫⽶，pt磅 pc 点 这些单位不是常⽤单位，也很少出现在css的布局中
3 、相对单位百分⽐ %
百分⽐也是⼀个倍数关系，从⽗级相同属性上换算的值 假设当前⽗级的 width: 100px ，⼦级的 width:15%， 换算得到⼦级 width:15px
4、相对单位em
em是相对于当前元素的font-size属性的单位值，当font-size设置为 12px时，1em = 12px 但是font-size是⼀个 可继承的属性，所以，当你没有设置值时，会从⽗级继承该属性的值。这⼀点相当重要。
5、相对单位rem
rem相⽐em的好处就是，所有相对单位rem是以root元素也就是html标签的font-size为基准，因此有了同⼀的 度量单位，就不再担⼼继承上影响了实际所需要的⼤⼩。当html的font-size设置为15时，1rem=15px
9、Web字体
开发⼈员可以为⾃已的⽹⻚指定特殊的字体，⽆需考虑⽤户电脑上是否安装了此特殊字体，从此把特殊字体 处理成图⽚的时代便成为了过去。 ⽀持程度⽐较好，甚⾄IE低版本浏览器也能⽀持。 字体格式 不同浏览器所 ⽀持的字体格式是不⼀样的，我们有必要了解⼀下有关字体格式的知识。 1、TureType(.ttf)格式 .ttf字体是 Windows和Mac的最常⻅的字体，是⼀种RAW格式。 ⽀持这种字体的浏览器有IE9+、Firefox3.5+、 Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+； 2、OpenType(.otf)格式 .otf字体被认为是⼀种原 始的字体格式，其内置在TureType的基础上。 ⽀持这种字体的浏览器有Firefox3.5+、Chrome4.0+、 Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+； 3、Web Open Font Format(.woff)格式 woff字体是Web字 体中最佳格式，他是⼀个开放的TrueType/OpenType的压缩版，同时也⽀持元数据包的分离。 ⽀持这种字体 的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+； 4、Embedded Open Type(.eot)格式 .eot字体是IE专⽤字体，可以从TrueType创建此格式字体。 ⽀持这种字体的浏览器有IE4+； 5、SVG(.svg)格 式 .svg字体是基于SVG字体渲染的⼀种格式。 ⽀持这种字体的浏览器有Chrome4+、Safari3.1+、 Opera10.0+、iOS Mobile Safari3.2+；
了解了上⾯的知识后，我们就需要为不同的浏览器准备不同格式的字体。
案例演示
10、字体图标
其实我们可以把⽂字理解成是⼀种特殊形状的图⽚，反之我们是不是也可以把图⽚制作成字体呢？ 答案是肯 定的。 常⻅的是把⽹⻚常⽤的⼀些⼩的图标，借助⼯具帮我们⽣成⼀个字体包，然后就可以像使⽤⽂字⼀样 使⽤图标了。 优点： 1、将所有图标打包成字体库，减少请求； 2、具有⽮量性，可保证清晰度； 3、使⽤灵 活，便于维护；
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
