CSS3基本属性

文章目录

    关于CSS3常用的基本属性。

1. 边框：
   输入框 实现圆角框
   border-radius:xpx;
   矩形框 实现边框阴影
   border-shadow:
   用图片做背景
   border-image

2. 背景：
   背景图片的尺寸，拉伸 background-size
   背景图片相对于盒子的位置 background-origin

3. 文本：
   文本阴影
   text-shadow:水平阴影、垂直阴影、模糊距离，以及阴影的颜色;
   长单词拆分换行：
   word-wrap:break-word;

4. 字体：
   字体: Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
   Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
   在新的 @font-face 规则中，必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
   如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

   @font-face
   {
   font-family: myFirstFont;
   src: url('Sansation_Light.ttf'),
        url('Sansation_Light.eot'); //IE9+
   }
   
   div
   {
   font-family:myFirstFont;
   }

5. 2D 转换
   translate()
   rotate()
   scale()
   skew()
   matrix()

6. 3D转换
   rotateX
   rotateY

7. 过渡： 从一种样式到另一种样式中间的效果
   transition: width 2s;
   要实现这一点，必须规定两项内容：

   规定您希望把效果添加到哪个 CSS 属性上
   规定效果的时长
   

8. 动画
   在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
   通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

   规定动画的名称
   规定动画的时长

    @keyframes myfirst
      {
      from {background: red;}
      to {background: yellow;}
      }
   
      @-moz-keyframes myfirst
      {
      from {background: red;}
      to {background: yellow;}
      }
   
      @-webkit-keyframes myfirst
      {
      from {background: red;}
      to {background: yellow;}
      }
   
      @-o-keyframes myfirst
      {
      from {background: red;}
      to {background: yellow;}
      }
   
   div{
    animation: myfirst 5s;
    -moz-animation: myfirst 5s;	// Firefox
    -webkit-animation: myfirst 5s;	// Safari 和 Chrome
    -o-animation: myfirst 5s;	// Opera
    }

9. 多列
   Firefox 需要前缀 -moz-。
   Chrome 和 Safari 需要前缀 -webkit-。
   column-count
   column-gap
   column-rule

10. 其他
    resize：允许用户自动调整元素尺寸
    box-sizing
    outline-offset