zoukankan      html  css  js  c++  java
  • css3新特性总结

    一、什么是css3

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

    二、css3新特性

      1、边框

      css3的边框有如下属性:

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

        

        效果如下所示:

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

        

        效果如下所示:

        

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

        

        效果如下所示:

         

      2、背景

        (1)、background-size

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

        (2)、background-origin

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

      3、文本效果

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

          

        效果如下:  

          

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

          

        效果如下:

          

      4、字体

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

      5、2D转换

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

         

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

          

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

          

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

          

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

      6、3D转换

        

      7、过渡

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

        

      8、动画

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

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

        

      9、多列

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

          

        效果如下:

      

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

        

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

        

      10、用户界面

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

        

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

        

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

        

        

    三、总结

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

  • 相关阅读:
    kube-apiserver
    深度学习三:卷积神经网络
    深度学习二:概率和反向传播的变种
    深度学习一:深度前馈网络和反向传播
    Knowledge 1:Propositional Logic 命题逻辑基础及符号
    评估方法:留出法、交叉验证法、自助法、调参与最终模型
    你曾这样问过
    套路总结
    NOI2020游记
    curl不是内部或外部命令,也不是可运行的程序或批处理文件
  • 原文地址:https://www.cnblogs.com/lichuankai/p/9376144.html
Copyright © 2011-2022 走看看