CSS 3

CSS 3 基础

CSS 3 边框

  • border-radius(边框圆角)

  • box-shadow(盒子阴影)

  • border-image(边框图片)


CSS 3 背景

  • background-image(背景图片)

  • background-size(背景图片大小)

  • background-origin(背景图片的位置区域)

  • background-clip(背景图片裁剪)


CSS 3 渐变

  • Linear Gradients(线性渐变):

    1
    background: linear-gradient(direction, color stop1, color stop2, ...);
  • 重复的线性渐变:

    1
    background: repeating-linear-gradient(direction, color stop1, color stop2, ...);
  • Radial Gradients(径向渐变)

    1
    background: radial-gradient(center, shape size, start-color, ..., last-color);
  • 重复的径向渐变

    1
    background: repeating-radial-gradient(center, shape size, start-color, ..., last-color);

CSS 3 文本效果

  • text-shadow(文本阴影)

  • box-shadow(盒子阴影)

  • text-overflow(文本溢出)

  • word-wrap(单词换行)

  • word-break(单词拆分换行)

  • hangging-punctuation(标点符号位于线框之外)

  • punctuation-trim(标点符号修剪)

  • text-align-last(最后一行对齐)

  • text-emphasis(文本前景色)

  • text-justify(text-align 设置为 justify 的对齐方式)

  • text-outline(文本轮廓)

  • text-wrap(文本换行)


CSS 3 字体

使用 @font-face 定义:

  • font-family(字体名称)

  • src(字体文件 URL)

  • font-stretch(拉伸字体)

  • font-style(字体样式)

  • font-weight(字体粗细)

  • unicode-range(字体支持的 Unicode 字符范围)


CSS 3 2D 转换

使用 transform 定义:

1. 转换属性

  • transform(2D 或 3D 转换)

  • transform-origin(更改转换元素位置)

    2. 转换方法

  • translate()(平移)

  • rolate()(旋转)

  • scale()(缩放)

  • skew()(倾斜)

  • matrix()(所有功能)


CSS 3 3D 转换

使用 transform 定义:

1. 转换属性

  • transform(2D 或 3D 转换)

  • transform-origin(更改转换元素位置)

  • transform-style(嵌套元素显示)

  • perspective(透视效果)

  • perspective-origin(底部位置)

  • perspective-visibility(可见性)

    2. 转换方法

  • translate3d()(平移)

  • rolate3d()(旋转)

  • scale3d()(缩放)

  • perspective()(透视视图)


CSS 3 过渡

使用 transition 定义:

  • transition(所用功能)

  • transition-property(应用过渡的 CSS 属性名称)

  • transition-duration(过渡时间)

  • transition-timing-function(过渡时间曲线)

  • transition-delay(延迟过渡时间)


CSS 3 动画

使用 @keyframes 定义:

  • animation(所有动画简写属性,除了 animation-play-sate)

  • animation-name(动画名称)

  • animation-duration(动画时间,默认为0)

  • animation-timing-function(动画时间曲线)

  • animation-fill-mode(动画暂停时应用的样式)

  • animation-delay(延迟动画时间)

  • animation-iteration-count(动画播放次数)

  • animation-direction(动画下一周期逆向播放)

  • animation-play-state(动画运行状态)


CSS 3 多列

  • column-count(列数)

  • column-gap(列间隔)

  • column-rule-style(列边框)

  • column-rule-width(边框厚度)

  • column-rule-color(边框颜色)

  • column-rule(简写属性)

  • column-span(跨列)

  • column-width(列宽)

  • column-fill(填充列)

  • columns(column-width 和 column-count 的简写)


CSS 3 用户界面

  • resize(调整尺寸)

  • box-sizing(调整方框尺寸)

  • outline-offset(外形修饰)

  • appearance(标准用户界面元素)

  • icon(图标)


CSS 3 图片

  • 圆角图片

  • 缩略图

  • 响应式图片

  • 图片文本

  • 卡片式图片

  • 图片滤镜

  • 响应式图片相册

  • 图片模态


CSS 3 按钮

  • 基本按钮样式

  • 按钮颜色

  • 按钮大小

  • 圆角按钮

  • 按钮边框颜色

  • 鼠标悬停按钮

  • 按钮阴影

  • 禁用按钮

  • 按钮宽度

  • 按钮组

  • 带边框按钮组

  • 按钮动画


CSS 3 分页

  • 简单分页

  • 点击及鼠标悬停分页样式

  • 带边框分页

  • 面包屑导航


CSS 3 框大小

  • 默认情况:

    width + padding + border = 元素实际宽度
    height + padding + border = 元素实际高度
  • 使用 box-sizing: border-box :

    width = 元素实际宽度
    height = 元素实际高度

CSS 3 弹性盒子

  • display(盒子类型)

  • flex-direction(子元素排列方式)

  • justify-content(子元素对齐方式)

  • align-items(子元素在纵轴对齐方式)

  • flex-wrap(子元素换行方式)

  • align-content(各行的对齐)

  • flex-flow(flex-direction 和 flex-wrap 的简写)

  • order(排序)

  • align-self(弹性元素自身在纵轴对齐方式)

  • flex(弹性子元素分配空间方式)


CSS 3 媒体查询

使用 @media 定义

媒体类型:

  • all(所有设备)

  • print(打印机)

  • screen(屏幕)

  • speech(屏幕阅读器)

-------------本文结束 感谢您的阅读-------------
您的支持将鼓励我继续创作!