css2与css3的区别

CSS3引进了一些新的元素新的特性,我收集以下,自己做了一个小结:


  1. animation(基础动画)eg:  div
    {
    animation: myfirst 5s linear 2s infinite alternate;
    /* Firefox: */
    -moz-animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 和 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
    /* Opera: */
    -o-animation: myfirst 5s linear 2s infinite alternate;
    }
  2. background-clip(规定背景的绘制区域)eg: div
    {

    background-clip:content-box;
    }

  3. background-origin(

    background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、padding、content三种,而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。

    比如,我们想要在边框上显示背景,我们可以使用background-origin帮我们实现(前提是边框要是透明的,不然它会覆盖住背景)

    background-clip:border|padding|content

    该属性指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关,背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。

    background-origin:padding|border|content

    该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置,你可以用这个属性在边框上绘制背景,但边框上的背景显不显示出来那就要由background-clip来决定了

  4. background-size(背景大小)
  5. border-radius (圆角)eg:

    向 div 元素添加圆角边框:

    div
    {
    border:2px solid;
    border-radius:25px;
    }
  6. border-image (边框图片)
  7. box-decoration-break({ box-decoration-break: sBreak }  可能的值 sBreak  一个字符串,用于指定以下值之一 slice 默认值。不会针对整个方框呈现 border 、 padding 、 box-...)
  8. box-shadow(阴影)
  9. box-sizing(

    规定两个并排的带边框的框:

    div
    {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:50%;
    float:left;
    })
  10. columns (

    规定列的宽度和列数:

    div
    {
    columns:100px 3;
    -moz-columns:100px 3; /* Firefox */
    -webkit-columns:100px 3; /* Safari 和 Chrome */
    }

    )

  11. clear-after(清除浮动)
  12. flex (

    定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素,则 #p1 的宽度是 100 像素,而 #p2 的宽度是 200 像素:

    #p1
    {
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari 和 Chrome */
    box-flex:1.0;
    border:1px solid red;
    } #p2
    {
    -moz-box-flex:2.0; /* Firefox */
    -webkit-box-flex:2.0; /* Safari 和 Chrome */
    box-flex:2.0;
    border:1px solid blue;
    }

    )

  13. font-stretch(

    让所有的div元素的文本更宽:

    div { font-stretch: expanded; }

  14. font-size-adjust(

    通过指定font-size-adjust属性,浏览器将调整字体大小,无论字体系列("宋体"性质值0.58):

    div { font-size-adjust: 0.58; }

  15. font-synthesis(

    @font-faceCSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@font-face实现的,为了能让更多的朋友知道如何使用他,今天我主要把自己的一点学习过程贴上来和大家分享。

    首先我们一起来看看@font-face的语法规则:

       @font-face {
    font-family: <YourWebFontName>;
    src: <source> [<format>][,<source> [<format>]]*;
    [font-weight: <weight>];
    [font-style: <style>];
    }

  16. font-kerning(适用于在字体中以代码形式进行字符对间距调整p {
      font-kerning: none;
    })
  17. font-variant-caps(设置小型大写字母的字体显示文本,)
  18. hanging-punctuation(目前主流浏览器都不支持 hanging-punctuation 属性。

    在 p 元素首行的开始边缘之外放置一个标点符号:

    p
    {
    hanging-punctuation:first;
    }

  19. hyphens(设置如何对单词进行拆分,以改善段落的布局)
  20. icon(css3实现Icon UI图标
  21. image-resolution(规定图像的正确分辨率)
  22. image-orientation(目前只有 Firefox26 支持这个让图片旋转的 css 属性)
  23. line-break(

    在恰当的断字点进行换行:

    p.test {word-break:hyphenate;}
    

  24. object-fit(

    object-position属性决定了它的盒子里面替换元素的对齐方式。其取值和CSS中background-position属性取值一样。如下所示:

    img {
    height: 100px;
    width: 100px;
    object-fit: contain;
    object-position: top 75%;
    }

  25. object-position(

    object-position属性决定了它的盒子里面替换元素的对齐方式。其取值和CSS中background-position属性取值一样。如下所示:

    img {
    height: 100px;
    width: 100px;
    object-fit: contain;
    object-position: top 75%;
    }

  26. opacity(透明度)
  27. outline-offset(

    规定边框边缘之外 15 像素处的轮廓:

    div
    {
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
    }

  28. overflow-wrap / word-wrap(

    允许长单词换行到下一行:

    p.test {word-wrap:break-word;}
    

  29. backface-visibility(

    隐藏被旋转的 div 元素的背面:

    div
    {
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden; /* Chrome 和 Safari */
    -moz-backface-visibility:hidden; /* Firefox */
    -ms-backface-visibility:hidden; /* Internet Explorer */
    }

  30. perspective(

    设置元素被查看位置的视图:

    div
    {
    perspective: 500;
    -webkit-perspective: 500; /* Safari 和 Chrome */
    }

  31. perspective-origin(

    设置 3D 元素的基点位置:

    div
    {
    perspective:150;
    perspective-origin: 10% 10%;
    -webkit-perspective:150; /* Safari 和 Chrome */
    -webkit-perspective-origin: 10% 10%; /* Safari 和 Chrome */
    }

  32. pointer-events (

    CSS新属性pointer-events:字面理解是点击鼠标事件,值分别是auto和none。

    当使用pointer-events:none,表示它将捕获不到任何点击,而只是让事件穿透到它的下面。代码如下:

    <style>
    .overlay {
    pointer-events: none;
    }
    </style> <div id="overlay" class="overlay"></div>

    )

  33. resize(重置)
  34. tab-size(检索或设置对象中的制表符的长度。
  35. text-align-last(设置或检索对象中内容的水平对齐方式
  36. text-decoration-line(检索或设置对象中的文本装饰线条的位置。
  37. text-decoration-skip(设置对象中的文本装饰线条的形状)
  38. text-decoration-position(

    text-decoration-color:<color>

    <color>
    指定颜色。
    检索或设置对象中的文本装饰线条的颜色
  39. text-decoration-style(

    text-decoration-style:solid | double | dotted | dashed | wavy

    默认值:solid

    取值:

    solid:
    实线
    double:
    双线
    dotted:
    点状线条
    dashed:
    虚线
    wavy:
    波浪线

    说明:

    检索或设置对象中的文本装饰线条的形状。

    • 对应的脚本特性为textDecorationStyle

  40. text-emphasis (

    目前主流浏览器都不支持 text-emphasis 属性。

    text-emphasis 属性是简写属性,用于在一个声明中设置 text-emphasis-style 和 text-emphasis-color。

    )

  41. text-justify(

    齐行改变单词间的间隔:

    div
    {
    text-align:justify;
    text-justify:inter-word;
    }

  42. text-overflow(文本溢出隐藏)
  43. transform(

    旋转 div 元素:

    div
    {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg); /* Opera */
    }

  44. transform-style(

    使被转换的子元素保留其 3D 转换:

    div
    {
    transform: rotateY(60deg);
    transform-style: preserve-3d;
    -webkit-transform: rotateY(60deg); /* Safari 和 Chrome */
    -webkit-transform-style: preserve-3d; /* Safari 和 Chrome */
    }

  45. text-shadow(

    基础的文本阴影效果:

    h1
    {
    text-shadow: 5px 5px 5px #FF0000;
    }

  46. transition (

    把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px:

    div
    {
    width:100px;
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari 和 Chrome */
    -o-transition: width 2s; /* Opera */
    }

    )

  47. word-break(

    在恰当的断字点进行换行:

    p.test {word-break:hyphenate;}
    

  48. word-spacing(

    规定段落中的字间距是 25 像素:

    p
    {
    word-spacing:25px;
    }

  49. writing-mode(设置文本的垂直显示)

css2与css3的区别的更多相关文章

  1. 小结css2与css3的区别

    CSS3引进了一些新的元素新的特性,我收集以下,自己做了一个小结: animation(基础动画)eg:  div{animation: myfirst 5s linear 2s infinite a ...

  2. 小强的HTML5移动开发之路(4)——CSS2和CSS3

    来自:http://blog.csdn.net/dawanganban/article/details/17653149 在上一篇中我们提到学习HTML5要具备CSS的知识,在页面设计的时候HTML5 ...

  3. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  4. 那些熟悉又陌生的 css2、css3 样式,持续复习

    initial关键字:    除了 Internet Explorer,其他的主流浏览器都支持 initial 关键字. Opera 15 之前的版本不支持 initial 关键字. initial ...

  5. D3之svg transform 与 css3 transform 区别与联系

    D3就不用多介绍了,在数据可视化界属于大佬级别的js库.在这里主要想记录一下在写程序期间遇到的一个问题. 如下图所示,想完成主视图在小地图上的映射,小地图的白色矩形框用来代表当前主视图可见区域,主视图 ...

  6. 小程序wxss和css3的区别

    经过设置发现,微信小程序中wxss并不能完全支持css3的全部功能. 总结记录在此文中,以免忘记. 0 . wxss不能直接通过css3中的background-image属性来设置显示的背景图片. ...

  7. CSS、CSS2和CSS3选择器总结(全部选择器种类及其优先级)

    选择器种类罗列: 1.基础的选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; } E 标签选择器,匹配所有使用E标签的元素 p { fon ...

  8. 【css2、css3】css改变select选择框的样式

    效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. CSS3初步

    一.CSS与CSS3的区别 非常简单,CSS代表"Casading Style Sheets",就是样式表,是一种替代并为网站添加样式的标记性语言.现在所使用的CSS基本是在199 ...

随机推荐

  1. GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理(转)

    如何获取图片对应的base64字符串呢? 1:使用代码获取: 运行下面代码 var reader = new FileReader(), htmlImage; reader.onload = func ...

  2. mumu血压计母亲节“拼团”盛大开幕,百度和厂家创造一个双赢的局面

        在BAT的互联网时代.似乎不论什么新兴产品和服务都不能脱离BAT的支持,作为中国互联网体量最庞大的三家企业.BAT代表的是资源优势.用户优势.品牌优势.因此,一旦脱离BAT的支持,想迅速做大无 ...

  3. 如何使用autolayout的UIView加入动画

    hi,all: 在经过了一番犹豫之后,我决定将我自己做的这个小APP的源代码发布给大家: 其出发点是和大家一起学习iOS开发,仅供学习參考之用. 之前代码是托管与gitlab 上的.今天我将其pull ...

  4. Cookie和Session (转)

    Session和Cookie在网站开发中是用来保存用户与后端服务器的交互状态.它们有各自的缺点和优点.而且,他们的优点和应用场景是对立的.   Cookie 完整地描述:当一个用户通过HTTP访问一个 ...

  5. Data source rejected establishment of connection, message from server: &quot;Too many connections&quot;

    错误叙述性说明: 測试一段时间没有不论什么问题.今天突然用户无法登录,报错如Data source rejected establishment of connection,  message fro ...

  6. tomcat配置sqlserver数据库

    1. 首先确保Tomcat安装文件夹中的\common\lib(对于Tomcat5.5)或者是\lib(Tomcat6.0)文件夹中已包括JDBC连接数据库所必须的三个.jar文件(msbase.ja ...

  7. Android WebView坑摘要

    要抓好近期iPad HybridApp至Android举,坑遇到太多.让我折腾过Android临近4在退伍军人头痛! 今天前者被列出,以满足,然后慢慢自己解决.现在,它已经解决android键盘覆盖问 ...

  8. S关于使用QL声明 找出同时满足多个tag拍摄条件设置算法

    表结构 Tag Table:{tag_id, tag_name}  #标签表 News Table:{news_id, title,......}  #新闻列表 NewsTags Table:{tag ...

  9. 关于cocos2dx导入安卓项目至eclipse的诸多问题

    看视频实在是有点蛋疼,尽管我也想在苹果上做,可是奈何自己是一个小屌丝,根本买不起高富帅的装备.所以仅仅能硬着头皮去处理win以下的问题. 在把用C++语言编写的cocos2dx项目编译编译完毕之后,导 ...

  10. 一个MP3播放的插件jPlayer

    Jplayer小样   最近应公司要求需要一个MP3播放的插件,网上找了很多插件,看来看去还是jPlayer用着最舒服也最容易扩展.所以就找了个资料研究了下,简单做了个小DEMO.支持实时控制列表,常 ...