CSS------12.HTML5与CSS3-补充知识点

目录

HTML5CSS3-补充知识点

1.背景

1.背景缩放background-size

2、设置背景定位的原点 background-origin(原点，起点)

3、background-clip设置背景区域clip(裁切)

4、以逗号分隔可以设置多背景

2 .使⽤ CSS3盒⼦模型box-sizing

3 .关于before和after

4 .颜⾊表示⽅式

5 .⽂本 (shadow阴影)

text-shadow，可分别设置偏移量、模糊度、颜⾊（可设透明度）。

6 .边框图⽚

1 简写⽅式

2 设置边框图⽚的地址.

3 裁剪图⽚，如何去裁切图⽚，浏览器会⾃动去裁剪图⽚.

4 指定边框的宽度.

5 边框平铺的样式

6 设置的图⽚将会被“切割”成九宫格形式，然后进⾏设置。如下图

7 .渐变

(1)线性渐变 （gradient 变化）

(2)径向渐变 (radial 径向)

8. ⻓度单位

1 、绝对单位 px

2 、其他绝对单位

3 、相对单位百分⽐ %

4、相对单位em

5、相对单位rem

9、Web字体

10、字体图标

---

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、使⽤灵 活，便于维护；

友情推荐：案例 – Font Awesome 中文网