css3新特性总结

时间:2022-11-12 11:52:14

一、什么是css3

  css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂。css3完全向后兼容

二、css3新特性

  1、边框

  css3的边框有如下属性:

    (1)、border-radius:圆角边框,示例如下:

    css3新特性总结

    效果如下所示:

css3新特性总结

    (2)、box-shadow:边框阴影,示例如下:

    css3新特性总结

    效果如下所示:

    css3新特性总结

    (3)、border-image:边框图片,示例如下:

    css3新特性总结

    效果如下所示:

     css3新特性总结

  2、背景

    (1)、background-size

      css3中规定背景图片的尺寸,可以设置重复的背景图片。之前是由图片的实际尺寸决定的。

    (2)、background-origin

      规定背景图片的定位区域,此属性可以将多个图片整合成一个图片。有利于减少HTTP请求。

  3、文本效果

    (1)、text-shadow,文本阴影,示例如下:

      css3新特性总结

    效果如下:  

      css3新特性总结

    (2)、word-wrap,文本换行,示例如下:

      css3新特性总结

    效果如下:

      css3新特性总结

  4、字体

    css3中使用@font-face规则定义字体,指向字体的文件,在HTML中使用font-family属性引用字体的名称。

  5、2D转换

    (1)、translate()移动,示例如下:

     css3新特性总结

    (2)、rotate()旋转,示例如下:

      css3新特性总结

    (3)、scale()元素的缩放,示例如下:

      css3新特性总结

    (4)、skew()元素根据x轴或者y轴进行翻转,示例如下:

      css3新特性总结

    (5)、matrix()定义2D转换,使用六个值的矩阵。

  6、3D转换

    css3新特性总结

  7、过渡

    transition简写属性,用于在一个属性中设置四个过渡属性。示例如下:

    css3新特性总结

  8、动画

    css3中能够创建动画,可以在许多网页中取代动画图片,flash动画以及JavaScript。

    创建动画需要学习@keyframes规则,form表示开始。to表示结束,也可以使用百分比设置。示例如下:

    css3新特性总结

  9、多列

    (1)、column-count规定元素被分割的列数,示例如下:

      css3新特性总结

    效果如下:

  css3新特性总结

    (2)、column-gap规定列之间的间隔,示例如下:

    css3新特性总结

    (3)、column-rule设置列之间的宽度、样式和颜色规则。示例如下:

    css3新特性总结

  10、用户界面

    (1)、resize规定是否可由用户调整元素尺寸。

    css3新特性总结

    (2)、box-sizing允许你以确切的方式定义适应某个区域的具体内容。

    css3新特性总结

    (3)、outline-offset对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

    css3新特性总结

    

三、总结

  此次经历面试后才发现自己css3方面学过的都忘记了,值此空闲时间做一些笔记加深记忆。