CSS3新增特性

🌌关于CSS3新增特性
CSS3是CSS（层叠样式表）技术的升级版本，在CSS2.1的基础上增加了很多强大的新功能，以帮助开发人员解决一些实际面临的问题。使用CSS3不仅可以设计炫酷美观的网页，还能提高网页性能。CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。
 

---

目录

🌌关于CSS3新增特性

1️⃣CSS3 边框特性

2️⃣CSS3 背景

3️⃣CSS3 文本效果

4️⃣CSS3 字体（@font-face 规则）

5️⃣CSS3 盒子变形（元素转换）

6️⃣CSS3 过渡与动画（@keyframes规则）

7️⃣CSS3 多列布局与弹性盒模型布局（Flex Box）

8️⃣CSS3 多媒体查询

 🌌CSS3的优势

1️⃣CSS3 边框特性

• CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、添加阴影框、多层边框、边框色彩与图片等，并作为边界的形象而不使用设计程序，如 Photoshop。
• 新边框属性

  ---

  属性	说明	CSS
  border-image	设置所有边框图像的速记属性。	3
  border-radius	一个用于设置所有四个边框- *-半径属性的速记属性	3
  box-shadow	附加一个或多个下拉框的阴影

  2️⃣CSS3 背景
  CSS3允许使用多个属性（比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等）在一个元素上添加多层背景图片。该属性的应用大大改善了以往面对多层次设计需要多层布局的问题，帮助Web前端开发者在不借助Photoshop的情况下实现对页面背景的设计，简化了背景图片的维护成本 。
  background-image 属性：CSS3中可以通过background-image属性添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。该属性还可以设置背景的渐变效果，线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向，径向渐变（Radial Gradients）- 由它们的中心定义
  background-size 属性：background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。
  background-origin 属性：background-origin 属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
  

   语法

• background-origin: padding-box|border-box|content-box;

  值	描述
  padding-box	背景图像填充框的相对位置
  border-box	背景图像边界框的相对位置
  content-box	背景图像的相对位置的内容框

  background-clip 属性：CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

  语法

• background-clip: border-box|padding-box|content-box;

  值	说明
  border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
  padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
  content-box	背景绘制在内容方框内（剪切成内容方框）。

  3️⃣CSS3 文本效果

• CSS3新增了一些了新的关于文本显示效果，如text-shadow、text-overflow、word-wrap、word-break等等

• 4️⃣CSS3 字体（@font-face 规则）
  SS3中引入了@font-face，@font-face是链接服务器字体的一种方式，这些嵌入的字体能变成浏览器的安全字体，开发人员不用再担心用户没有这些字体而导致网页在用户浏览器无法正常显示的问题
  使用规则和例子
  在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。提示：URL请使用小写字母的字体，大写字母在IE中会产生意外的结果 
  如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)
  例子，修改了字体为细尖的类似于电子表的数字
  5️⃣CSS3 盒子变形（元素转换）
   在CSS2.1中，想让某个元素变形必须要借助JavaScript写大量的代码实现，在CSS3中加入了变形属性，该属性（transform）在2D或3D空间里操作盒子的位置和形状，来实现例如旋转、扭曲、缩放、拉伸或者移位。变形属性的出现，使Web前端中的元素展示不仅仅局限在二维空间，Web前端开发者可以通过旋转、扭曲、缩放或者移位等操作实现元素在三维控件上的展示。通过变形元素，web前端中的内容展示更加形象、真实。

• 属性转换

  🌌CSS3的优势
  减少开发成本与维护成本

  在CSS3出现之前，开发人员为了实现一个圆角效果，往往需要添加额外的HTML标签，使用一个或多个图片来完成，而使用CSS3只需要一个标签，利用CSS3中的border-radius属性就能完成。这样，CSS3技术能把人员从绘图、切图和优化图片的工作中解放出来。如果后续需要调整这个圆角的弧度或者圆角的颜色，使用CSS2.1，需要从头绘图、切图才能实现，使用CSS3只需修改border-radius属性值就可快速完成修改。
  CSS3提供的动画特性，可让开发者在先实现一些动态按钮或者动态导航时远离JavaScript，让开发人员不需要花费大量的时间去写脚本或者寻找合适的脚本插件来适配一些动态网站效果。
  提高页面性能
  很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”，换句话说，在进行Web开发时，减少多余的标签嵌套以及图片的使用数量，意味着用户要下载的内容将会更少，页面加载也会更快。另外，更少的图片、脚本和Flash文件能够减少用户访问Web站点时的HTTP请求数，这是提升页面加载速度的最佳方法之一。而使用CSS3制作图形化网站无需任何图片，极大地减少了HTTP的请求数量，并且提升了页面的加载速度。例如CSS3的动画效果，能够减少对JavaScript和Flash文件的HTTP请求，但可能会要求浏览器执行很多的工作来完成这个动画效果的渲染，这有可能导致浏览器响应缓慢致使用户流失。因此，在使用一些复杂的特效时需要考虑清楚。其实很多CSS3技术能够在任何情况下都大幅提高页面的性能 。
  CSS3将完全向后兼容，所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持CSS2 。