CSS3学习笔记

0 兼容

  • 添加以下前缀
    • -webkit: safari，chrome 私有属性
    • -ms: ie>9 浏览器 私有属性
    • -moz: firefox 私有属性
    • -o: opera 私有属性
  • border-image: -webkit(Safari 5 以及更早的版本), -o
  • transform: -webkit
  • transition: -webkit(Safari，Chrome25 及更早的版本)
  • column-*: -webkit, -moz，Internet Explorer 9 以及更早的版本不支持多列属性

1 边框

1-1 border-radius添加圆角边框

1
2
3
4
div {
    border:2px solid;
    border-radius:25px;
}

1-2 box-shadow用于添加阴影

  • box-shadow: X轴，Y轴，R轴，阴影颜色，inset(可选项，内阴影，不填则默认外阴影)

    1
    2
    3
    div {
        box-shadow: 0.5rem 0 1rem red;
    }

1-3 border-image使用图片来创建边框

2 背景

2-1 background-size规定背景图片的尺寸

  • 在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的

2-2 background-clip和background-origin

  • 它们均有三个属性:

    • border-box: 背景是从边框开始绘制，但当背景是图片的时候，左边和上边没有绘制图片，下边和右边有
    • padding-box: 背景从边框内部开始绘制，不包含边框
    • content-box: 背景从内容部分绘制

  • 用处:

    • 二者都是处理背景的样式
    • background-origin只作用于背景图片

3 文本效果

3-1 text-shadow文本应用阴影

  • 语法: text-shadow: h-shadow v-shadow blur color
    • h-shadow: 必需，水平阴影的位置
    • v-shadow: 必需，垂直阴影的位置
    • blur: 可选，模糊的距离
    • color: 可选，阴影的颜色

3-2 word-wrap允许对不可分割的单词进行分割并换行

  • 语法: word-wrap: normal | break-word;

4 字体

  • 允许将字体文件存放到服务器上，会在用户需要的时候下载到用户的计算机上

    • Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体
    • Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体

  • 使用。首先必须自定义字体名称(比如testFont)，然后后使用

    1
    2
    3
    4
    5
    6
    7
    @font-face {
        font-family: testFont;
        src: url('https://xxx.ttf'), url('https://xxx.eot'); /* IE9+ */
    }
    body {
        font-family: testFont;
    }

  • 粗体需要另外包含，需要指定font-weight

    1
    2
    3
    4
    5
    6
    7
    8
    @font-face {
        font-family: testFont;
        src: url('https://xxx.bold.ttf'), url('https://xxx.bold.eot'); /* IE9+ */
        font-weight:bold;
    }
    body {
        font-family: testFont;
    }

  • 经过以上两步，如果文本需要显示粗体，浏览器就会使用粗体。通过这样的方式，可以为相同的字体设置许多@font-face规则

  • @font-face包含:

    • font-family: 必需，规定字体的名称
    • src: 必需，定义字体文件的 URL
    • font-stretch: 可选，定义如何拉伸字体，默认normal，包含
      • normal
      • condensed
      • ultra-condensed
      • extra-condensed
      • semi-condensed
      • expanded
      • semi-expanded
      • extra-expanded
      • ultra-expanded
    • font-style: 可选，定义字体的样式，默认normal，包含
      • normal
      • italic
      • oblique
    • font-weight: 可选，定义字体的粗细，默认是normal，包含
      • normal
      • bold
      • 100
      • 200
      • 300
      • 400
      • 500
      • 600
      • 700
      • 800
      • 900
    • unicode-range: 可选，定义字体支持的UNICODE字体范围，默认是U+0-10FFFF

5 2D 转换

  • transform 关键字用于 2D 转换
  • 包含:
    • translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素
    • translateX(n) 定义 2D 转换，沿着 X 轴移动元素
    • translateY(n) 定义 2D 转换，沿着 Y 轴移动元素
    • scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度
    • scaleX(n) 定义 2D 缩放转换，改变元素的宽度
    • scaleY(n) 定义 2D 缩放转换，改变元素的高度
    • rotate(angle) 定义 2D 旋转，在参数中规定角度，单位: deg
    • skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴
    • skewX(angle) 定义 2D 倾斜转换，沿着 X 轴
    • skewY(angle)

6 3D 转换

  • transform也可以用于 3D 转换
  • 包含:
    • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵
    • translate3d(x,y,z) 定义 3D 转化
    • translateX(x) 定义 3D 转化，仅使用用于 X 轴的值
    • translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值
    • translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值
    • scale3d(x,y,z) 定义 3D 缩放转换
    • scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值
    • scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值
    • scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值
    • rotate3d(x,y,z,angle) 定义 3D 旋转
    • rotateX(angle) 定义沿 X 轴的 3D 旋转
    • rotateY(angle) 定义沿 Y 轴的 3D 旋转
    • rotateZ(angle) 定义沿 Z 轴的 3D 旋转
    • perspective(n) 定义 3D 转换元素的透视视图

7 过度

  • transition用于处理样式变化间的过渡

  • 以下示例中，鼠标放上去后，内容会在 2 秒后，在 4 秒内逐渐拉长，3 秒内颜色变成绿色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .test {
        text-align: center;
        width: 30%;
        margin: 0 auto;
        background-color: aqua;
        transition: width 4s, background-color 3s;
        transition-delay: 2s;
    }
    .test:hover {
        width: 50%;
        background-color: green;
    }

  • 属性

    • transition 简写属性，用于在一个属性中设置四个过渡属性
    • transition-property 规定应用过渡的 CSS 属性的名称
    • transition-duration 定义过渡效果花费的时间。默认是 0
    • transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”
    • transition-delay 规定过渡效果何时开始。默认是 0

8 动画

  • (略)

9 多列

  • 能够创建多个列来对文本进行布局 - 就像报纸那样

  • 属性

    • column-count 规定元素应该被分隔的列数
    • column-fill 规定如何填充列
    • column-gap 规定列之间的间隔
    • column-rule 设置所有 column-rule-* 属性的简写属性
    • column-rule-color 规定列之间规则的颜色
    • column-rule-style 规定列之间规则的样式
    • column-rule-width 规定列之间规则的宽度
    • column-span 规定元素应该横跨的列数
    • column-width 规定列的宽度
    • columns 规定设置 column-width 和 column-count 的简写属性

  • 以下示例将内容分为三列，间隔 2rem，中间用红线隔开

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .test {
        width: 30%;
        margin: 0 auto;

        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;

        -moz-column-gap: 2rem;
        -webkit-column-gap: 2rem;
        column-gap: 2rem;

        -moz-column-rule: 0.0625rem outset red;
        -webkit-column-rule: 0.0625rem outset red;
        column-rule: 0.0625rem outset red;
    }