常用CSS3属性汇总

3,505 阅读5分钟
CSS3边框
  • border-radius 圆角边框

    border-radius:25px;
    
  • box-shadow 边框阴影

    box-shadow: h-shadow v-shadow blur spread color inset;
    
    • h-shadow 必需。水平阴影的位置。允许负值。
    • v-shadow 必需。垂直阴影的位置。允许负值。
    • blur 可选。模糊距离。
    • spread 可选。阴影的尺寸。(blur模糊距离是算在盒子的长宽里面的,spread阴影的尺寸会增大阴影盒子的长宽)
    • color 可选。阴影的颜色。请参阅 CSS 颜色值。
    • inset 可选。将外部阴影 (outset) 改为内部阴影。
  • border-image 边框图片

    border-image 属性是一个简写属性,用于设置以下属性:

    • border-image-source 边框的图片的路径
    • border-image-slice 图片边框向内偏移
    • border-image-width 图片边框的宽度
    • border-image-outset 边框图像区域超出边框的量
    • border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
CSS3背景
  • background-clip 规定背景的绘制区域

    • border-box 背景被裁剪到边框盒。
    • padding-box 背景被裁剪到内边距框。
    • content-box 背景被裁剪到内容框。
  • background-origin 规定 background-position 属性相对于什么位置来定位

    • padding-box 背景图像相对于内边距框来定位。
    • border-box 背景图像相对于边框盒来定位。
    • content-box 背景图像相对于内容框来定位。
  • background-size 规定背景图像的尺寸

  • CSS3 多重图片

    body
    { 
    background-image:url(bg_flower.gif),url(bg_flower_2.gif);
    }
    
CSS3文本
  • text-overflow 规定当文本溢出包含元素时发生的事情

    • clip 修剪文本。
    • ellipsis 显示省略符号来代表被修剪的文本。
    • string 使用给定的字符串来代表被修剪的文本。
  • text-shadow 向文本设置阴影

    text-shadow: h-shadow v-shadow blur color;
    
    • h-shadow 必需。水平阴影的位置。允许负值。
    • v-shadow 必需。垂直阴影的位置。允许负值。
    • blur 可选。模糊的距离。
    • color 可选。阴影的颜色。
  • white-space(不是css3属性)

    • normal 默认。空白会被浏览器忽略。
    • pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre标签。
    • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 br标签为止。
    • pre-wrap 保留空白符序列,但是正常地进行换行。
    • pre-line 合并空白符序列,但是保留换行符。
    • inherit 规定应该从父元素继承 white-space 属性的值。
CSS3字体
  • @font-face 规则,使用方式:首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

    如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont)

    <style> 
    @font-face
    {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
    }
    
    div
    {
    font-family:myFirstFont;
    }
    </style>
    
CSS3 2D转换
  • 通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
  • transform
    • translate(x, y) 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数
    • rotate(n deg) 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。 (以旋转元素中心为旋转点
    • scale(x, y) 方法,元素宽高变化为原始的倍数,根据给定的宽度(X 轴)和高度(Y 轴)参数
    • scale(x)
    • scale(y)
CSS3 3D转换
  • transform
    • rotateX(n deg) 方法,元素围绕其 X 轴以给定的度数进行旋转。
    • rotateY(n deg) 方法,元素围绕其 Y 轴以给定的度数进行旋转。
    • rotateZ(n deg) 方法,元素围绕其 Z 轴以给定的度数进行旋转。
CSS3 过渡
  • 必须规定把过渡效果添加到哪个CSS属性上,并且规定效果的时长

  • 如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开

  • 语法:transition: property duration timing-function delay;

    • transition-property 规定设置过渡效果的 CSS 属性的名称。

    • transition-duration 规定完成过渡效果需要多少秒或毫秒。

    • transition-timing-function 规定速度效果的速度曲线。

      transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
      bezier(n,n,n,n);
      
      • linear 以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1)) 。
      • ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
      • ease-in 以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
      • ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
      • ease-in-out 以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
      • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
    • transition-delay 定义过渡效果何时开始。

CSS3 动画
  • @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

    0% 是动画的开始,100% 是动画的完成。

    @keyframes myfirst
    {
    from {background: red;}
    to {background: yellow;}
    }
    
  • 通过animation属性将动画绑定到选择器上

    div
    {
    animation: myfirst 5s;
    -moz-animation: myfirst 5s;	/* Firefox */
    -webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
    -o-animation: myfirst 5s;	/* Opera */
    }
    
    • 语法 animation: name duration timing-function delay iteration-count direction;
    • animation-iteration-count: n|infinite; 播放n次或者无限次
    • animation-direction: normal|alternate; 正常播放或者轮流反向播放
CSS3 多列
  • column-count 属性规定元素应该被分隔的列数
  • column-gap 属性规定列之间的间隔
  • column-rule 属性设置列之间的宽度、样式和颜色规则
CSS3 用户界面
  • resize 属性规定是否可由用户调整元素尺寸

    resize: none|both|horizontal|vertical;
    
  • box-sizing 以确切的方式定义适应某个区域的具体内容

    content-box|border-box|inherit;
    
  • outline-offset 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓

    • 轮廓不占用空间
    • 轮廓可能是非矩形
    outline-offset: length|inherit;