小结css2与css3的区别

时间  2019-12-02
标签 小结 css2 css css3 区别 栏目 CSS 繁體版
原文   原文链接

CSS3引进了一些新的元素新的特性，我收集如下，本身作了一个小结：javascript

  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-color:yellow;
    background-clip:content-box;
    }
  3. background-origin（

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

    好比，咱们想要在边框上显示背景，咱们可使用background-origin帮咱们实现（前提是边框要是透明的，否则它会覆盖住背景）html

    background-clip：border|padding|contentjava

    该属性指定了背景在哪些区域能够显示，但与背景开始绘制的位置无关，背景的绘制的位置能够出如今不显示背景的区域，这时就至关于背景图片被不显示背景的区域裁剪了一部分同样。css3

    background-origin：padding|border|contentweb

    该属性指定了背景从哪一个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置，你能够用这个属性在边框上绘制背景，但边框上的背景显不显示出来那就要由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-face是CSS3中的一个模块，他主要是把本身定义的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（设置文本的垂直显示）
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程