W3school学习笔记之CSS3

1、边框

• box-shadow
• border-radius
  
  • 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  • 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  • 一个值： 四个圆角值相同
• border-image
  
  • border-image-source：图像来源
  • border-image-slice：图像边界向内偏移
  • border-image-width：图像边界的宽度
  • border-image-outset：用于指定在边框外部绘制border-image-area 的量
  • border-image-repeat 这个例子演示了如何创建一个border-image 属性的按钮。
    
    • stretch 默认值。拉伸图像来填充区域 。
    • repeat：平铺图像来填充区域。
    • round：类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
    • space：类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围。

注意： 前缀是-webkit-的Safari支持阴影边框，前缀是-o-的Opera支持边框图像。

2、背景

• background-size指定背景图像的大小。
• background-origin属性指定了背景图像的位置区域。（content-box，padding-box，border-box）
• background-clip属性指定背景绘制区域。（content-box，padding-box，border-box）

3、渐变

• 线性渐变
  
  • 基本语法：
    background: linear-gradient(direction|angle, color-stop1, color-stop2, …);
  • 重复的线性渐变repeating-linear-gradient()

#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

• 径向渐变
  
  • 基本语法
    background: radial-gradient(center, shape size, start-color, …, last-color);
  • size 参数定义了渐变的大小。它可以是以下四个值：
    
    • closest-side
    • farthest-side
    • closest-corner
    • farthest-corner
  • 重复的径向渐变repeating-radial-gradient()

#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
  background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}

4、文本

• text-shadow
• word-wrap属性允许长的内容可以自动换行。
  
  • normal 只在允许的断字点换行（浏览器保持默认处理）。
  • break-word 在长单词或 URL 地址内部进行换行。
• word-break属性指定非CJK脚本的断行规则。(CJK脚本是中国，日本和韩国（”中日韩”）脚本。)
  
  • normal 使用浏览器默认的换行规则。
  • break-all 允许在单词内换行。
  • keep-all 只能在半角空格或连字符处换行。
• text-overflow属性指定当文本溢出包含它的元素，应该发生什么。
  
  • clip 修剪文本。
  • ellipsis 显示省略符号来代表被修剪的文本。
  • string 使用给定的字符串来代表被修剪的文本。
• 字体

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

5、2D转换

• transform：
  
  • translate()
  • rotate()顺时针
  • scale()
  • skew()
  • matrix()
• transform-origin 更改转化元素基准点

6、3D转换

• rotateX()
• rotateY()

7、过渡

• transition 简写属性。
• transition-property 规定应用过渡的 CSS 属性的名称。
• transition-duration 定义过渡效果花费的时间。默认是 0。、
• transition-timing-function 规定过渡效果的时间曲线。
  
  • linear规定以相同速度开始至结束的过渡效果。
  • ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。
  • ease-in 规定以慢速开始的过渡效果。
  • ease-out规定以慢速结束的过渡效果。
  • ease-in-out规定以慢速开始和结束的过渡效果。
  • cubic-bezier(n,n,n,n) 在贝塞尔函数中定义自己的值。可能的值是 0 至 1 之间的数值。
• transition-delay 规定过渡效果何时开始。默认是 0。

8、动画

• @keyframes 规定动画。
• animation 所有动画属性的简写属性，除了 animation-play-state 属性。
• animation-name 规定 @keyframes 动画的名称。
• animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
• animation-timing-function 规定动画的速度曲线。默认是 “ease”。
• animation-delay 规定动画何时开始。默认是 0。
• animation-iteration-count 规定动画被播放的次数。默认是 1。（infinite无限次）
• animation-direction 规定动画是否在下一周期逆向地播放。
  
  • normal 默认值。动画按正常播放。
  • reverse 动画反向播放。
  • alternate 动画在奇数次正向播放，在偶数次反向播放。
  • alternate-reverse 动画在奇数次反向播放，在偶数次正向播放。
• animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。

div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s linear 2s infinite alternate;
    -webkit-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

9、多列

• column-count 指定元素应分为的列数
• column-gap 指定列之间差距 3
• column-rule 一个用于设置所有列规则的简写属性
  
  • column-rule-color 指定的列之间颜色规则
  • column-rule-style 指定的列之间的样式规则
  • column-rule-width 指定的列之间的宽度规则
• column-span 指定一个元素应该横跨多少列
• column-width 指定列的宽度
• columns 缩写属性设置列宽和列数

10、用户界面特性

• resize：none，both，horizontal，vertical
• box-sizing：content-box，border-box
• outline-offset：设置轮廓框架在 border 边缘外的偏移。