zoukankan      html  css  js  c++  java
  • CSS3学习笔记(新属性)

    1. 边框(圆角边框、加阴影和用图片绘制)

    新增加 border-radius  box-shadow  border-image


    .div1{
        border:2px solid purple;
        border-radius: 25px;
        -moz-border-radius:25px;(火狐老版本)
        width:600px;
        height:300px;
        box-shadow:10px 10px 5px #888888;
        -webkit-border-image: url(border.png) 2 2 round;(chrome)
    }

    2.背景

    新增加 background-size  background-origin  background-clip

    .div1{
        border:2px solid purple;
        width:600px;
        height:300px;
        background:url(039.JPG);
        background-size:100% 100%;
        background-origin:content-box;(三种属性padding-box,content-box,border-box定位图片的相对位置)
        background-clip:content-box;(三种属性padding-box,content-box,border-box规定背景的绘制区域)
    }


    3、阴影

    可以分为box-shadow和text-shadow两类(即边框阴影和文字阴影)

     #boxShadow{ border: 5px solid #111; 
      -webkit-box-shadow: 5px 5px 7px #999; 
       -webkit-border-bottom-right-radius: 15px; 
       padding: 15px 25px; 
       height: inherit; 
       width: 590px; 
     }
     .textShadowSingle { 
      font-size: 3.2em; 
      color: #F5F5F5; 
      text-shadow: 3px 3px 7px #111; 
      text-align: center; 
    }

    4. 文本效果

    新的文本属性:text-shadow   word-wrap 等

    p {word-wrap:break-word;} 允许长单词换到下一行

    5. 字体

    在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3,web 设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

    eg:

    @font-face
    { font-family: myFirstFont; 
    src: url('Sansation_Bold.ttf'), 
    url('Sansation_Bold.eot');
      font-weight:bold; }

    文件 "Sansation_Bold.ttf" 是另一个字体文件,它包含了 Sansation 字体的粗体字符。只要 font-family 为 "myFirstFont" 的文本需要显示为粗体,浏览器就会使用该字体。

    6.CSS3透明度

     由浮点数字和单位标识符组成的长度值。不可为负值。声明用来设置一个元素的透明度,opacity取值为1的元素是完全不透明的,反之,取值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。

    div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; }  
    
    div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; }  
    
    div.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; } 

    7.盒子模型

    display:box;
    box-flex:1;(子容器针对父容器的宽度或者高度划分)

    eg:

    < article class= “wrap” >
        < section class="sectionOne" >01< /section >
        < section class="sectionTwo" >02< /section>
        < section class="sectionThree" >03< /section >
    < /article >
     
    
    .wrap{
        width:600px;
        height:200px;
        display:-moz-box;
        display:-webkit-box;
        display:box;
    }
    .sectionOne{
        background:orange;
        -moz-box-flex:3;
        -webkit-box-flex:3;
        box-flex:3;
    }
    .sectionTwo{
        background:purple;
        -moz-box-flex:2;
        -webkit-box-flex:2;
        box-flex:2;
    }
    .sectionThree{
        -moz-box-flex:1;
        -webkit-box-flex:1;
        box-flex:1;
        background:green;
    }

    wrap必须定义为盒子才能划分,上面盒子按照3:2:1划分

    box属性:box-orient | box-direction | box-align | box-pack | box-lines

    详细参考:http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/


    8.浏览器兼容性

    大 部分浏览器只支持部分CSS3属性。最常见的私有属性是用于Webkit核心浏览器的(比如, Safari), 它们以-webkit-开始,以及Gecko核心的浏览器(比如, Firefox),以-moz-开始,还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展(目前只有IE8支持-ms-前缀)。

  • 相关阅读:
    输入输出那些事
    NYOJ 20
    NYOJ 283
    HDU 1285
    HDU 2639(第K大背包)
    HDU 4288
    对Visual Studio C++ hash_map严谨一点的测试转载
    vc6,vc.net,vc7,vc8,vc9,c,c++,c#的区别与联系
    我在南大的七年刘末鹏
    慎用Visual Studio C++默认的hash_map转载
  • 原文地址:https://www.cnblogs.com/wishyouhappy/p/3650877.html
Copyright © 2011-2022 走看看