zoukankan      html  css  js  c++  java
  • CSS3中新增的内容

    (整理中······)

    一、选择器

    新增的伪类

    1、p:first-of-type   选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

    2、p:last-of-type   选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

    3、p:only-of-type   选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

    4、p:only-child   选择属于其父元素的唯一子元素的每个 <p> 元素。

    5、p:nth-child(2)   选择属于其父元素的第二个子元素的每个 <p> 元素。

    二、盒子模型

    新增了边框属性:

    1、border-radius

    支持浏览器:IE9+、Firefox、Chrome、Safari 、Opera

    2、box-shadow  向方框添加一个或多个阴影

    支持浏览器:IE9+、Firefox、Chrome、Safari 、Opera

    3、border-image

    支持浏览器:Firefox(旧版本需要前缀-moz-)、Chrome(旧版本需要前缀-webkit-)、Safari(Safari 5 以及更老的版本需要前缀 -webkit-) 、Opera( 需要前缀 -o-)

    三、背景

    1、background-size   规定背景图片的尺寸

    支持浏览器:IE9+、Firefox(旧版本需要前缀-moz-)、Chrome、Safari、Opera

    2、background-origin    规定背景图片的定位区域,背景图片可以放置于 content-box、padding-box 或 border-box 区域。

    支持浏览器:IE9+、Firefox、Chrome、Safari、Opera

    3、background-clip   规定背景的绘制区域

    支持浏览器:IE9+、Firefox、Chrome、Safari、Opera

    四、文本效果

    1、text-shadow   可向文本应用阴影

    支持浏览器:IE10、Firefox、Chrome、Safari、Opera

    2、word-wrap   允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分

    支持浏览器:所有主流浏览器

    五、字体

     @font-face

    六、2D/3D转换

    1、transform    向元素应用 2D 或 3D 转换

    支持浏览器:

    IE10:2D、3D都支持(2D IE9 需要前缀 -ms-);

    Firefox:2D、3D都支持;

    Chrome:2D、3D都支持(2D、3D需要前缀 -webkit-);

    Safari:2D、3D都支持(2D、3D需要前缀 -webkit-);

    Opera:只支持2D

    2D转换方法:

    3D转换方法:

    2、transform-origin   允许你改变被转换元素的位置

    七、过渡与动画

    1、transition  

    支持浏览器:IE 10、Firefox、Chrome(Chrome 25 以及更早的版本,需要前缀 -webkit-)、Opera、Safari( 需要前缀 -webkit-)

    2、@keyframes  用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

    支持浏览器:IE 10、Firefox、Chrome(Chrome 25 以及更早的版本,需要前缀 -webkit-)、Opera、Safari( 需要前缀 -webkit-)

    3、animation 

    支持浏览器:IE 10、Firefox、Chrome(Chrome 25 以及更早的版本,需要前缀 -webkit-)、Opera、Safari( 需要前缀 -webkit-)

    八、多列布局

    九、用户界面

  • 相关阅读:
    post请求返回404
    启动网关服务报错 Unable to find GatewayFilterFactory with name RequestRateLimiter
    数据库远程连接linux报错2003 can't connect to MySQL server on ip (0) 防火墙没有开放端口3306
    idea下maven项目打包部署到tomcat服务器
    修改Idea背景色
    20种源代码测试工具
    作为一名测试工程师,需要具备哪些能力
    Android自动化测试工具——monkey简介及入门
    appium关于定位元素
    appium testcase2
  • 原文地址:https://www.cnblogs.com/thislbq/p/5887184.html
Copyright © 2011-2022 走看看