CSS3基础

学习任务
CSS3 简介
- css3clickhart
- caniuse
CSS3 优势
CSS3 新增选择器
CSS3 新增属性
- 背景属性
CSS3 新增使用服务器字体
CSS3 新增文本属性
CSS3 新增盒模型属性
CSS3 新增变形动画属性
CSS3 新增多列属性
- #clean src/27_CSS3多列.html

学习任务

任务1 精通CSS3 新增选择器
任务2 精通CSS3 新增属性

CSS3 简介

CSS3 是最新的 CSS 标准。我们现在说的 CSS3 ，指的是那些在 CSS 2.1 之后发布的所有东西。

CSS 很早已经开始被分割成多个独立的模块，每个模块可以独立分级，每个模块只包含一小部分功能，所以某个进展缓慢的功能模块不会拖慢整个规范的制定工作。

CSS官方文档

在 https://drafts.csswg.org 中可以查看官方文档，CSS3现在还在发展中，有一些东西已经到了level4。开发者在使用 CSS3 规范时，需要注意某些浏览器对 CSS3 的支持性不太好，如IE。

css3clickhart

在 css3clickhart 中可以查看某一特征在浏览器中的兼容性。测试的浏览器包括桌面（如Chrome、Firefox、IE、Opera、Safari）和移动端（如Apple、Android、Opera、mobile、Chrome mobile、Firefox mobile）。浏览器图标显示绿色则表明可以兼容性的详细资料。

http://css3clickchart.com/

caniuse

Caniuse 是一个检测浏览器对 JS、HTML5、CSS、SVG 或者其他 Web 前端相关特性支持程度的列表的网站。在搜索框中输入想要查询的属性名称，则会显示该属性在所有浏览器中的兼容性，并告知用户哪些浏览器支持该属性，哪些不支持。

https://caniuse.com/

CSS3 优势

CSS3 的优势是能够使网站变得非常炫酷。
- CSS 3.0 能够代替之前需要用 JavaScript 、jQuery 才能实现的交互效果，可以为用户带来更好的体验，特别是针对移动端界面。
- 另外，使用 CSS3 还能减少开发和维护成本。
CSS3将完全向后兼容，所以没有必要修改现在的设计使它们继续运作。
- 浏览器也还将继续支持 CSS2 。所以，CSS3 主要的影响是可以使用新的可用的选择器和属性，这些允许实现新的设计效果（如动态和渐变），而且可以简单地设计出现在的设计效果（如使用分栏）。

CSS3 新增选择器

兄弟选择器

兄弟选择器和 CSS2 中相邻兄弟选择器是不一样的。相邻兄弟选择器是指两个元素相邻，拥有同一个父元素；兄弟选择器是第一个元素之后，所有的元素都会被选择，且这些元素和第一个元素拥有同一个父元素，两个元素之间不一定要相邻，写作格式如下:

元素1~元素2{
  property1:value1;
  property2:value2;
  property3:value3;
}

#clean src/01_兄弟选择器.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS兄弟选择器</title>
    <style>
      h2~p { color: red; }
    </style>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>这里不会变色</p>
    <h2>二级标题</h2>
    <p>这里会变色</p>
    <h3>三级标题</h3>
    <p>这里也会变色</p>
    <div>
      <p>该 p 在 div 内部，<br>
      与 h2 元素不是同一个父元素，<br>
      不会变色。</p>
    </div>
  </body>
</html>

属性选择器

CSS3 新增了 3 种属性选择器，如下表所示。

属性选择器	描述
E[attribute^=value]	用于选取带有以指定值开头的属性值的元素
E[attribute$=value]	用于选取属性值以指定结尾的元素
E[attribute*=value]	用于选取属性值中包含指定值的元素，位置不限，也不限制整个单词

#clean src/02_属性选择器.html

<head>

<head>
  <meta charset="UTF-8">
  <title>属性选择器</title>
  <style>
    td[lang]       { color:#ff0000; }
    td[title="a"]  { color:#ff0000; }
    td[title~="c"] { color: #ff0000; }
    td[title|="h"] { color: #ff0000; }
    td[title^="l"] { color: #ff0000; }
    td[title$="o"] { color: #ff0000; }
    td[title*="x"] { color: #ff0000; }
  </style>
</head>

<body>

CSS2 td[lang]

有 lang 属性的 td 元素被选择

<body>
<h3>有lang属性的td元素会被选择</h3>
<table border="1">
  <tr>
    <td>有td元素无属性</td>
    <td lang="">有td元素有lang属性但属性值为空</td>
    <td lang="en">有td元素有lang属性属性值为en</td>
    <td lang="cn">有td元素有lang属性属性值为en</td>
  </tr>
</table><br />

CSS2 td[title="a"]

有title属性属性值为a的td元素会被选择

<h3>有title属性属性值为a的td元素会被选择</h3>
<table border="1">
  <tr>
    <td>有td元素无属性</td>
    <td title="">有td元素有title属性但属性值为空</td>
    <td title="a">有td元素有title属性属性值为a</td>
    <td title="a b">有td元素有title属性属性值为a b</td>
    <td title="ab">有td元素有title属性属性值为ab</td>
    <td title="ba">有td元素有title属性属性值为ba</td>
  </tr>
</table><br />

CSS2 td[title~="c"]

有title属性属性值包含“c,且c前后只能有空格”的td元素会被选择

<h3>有title属性属性值包含“c,且c前后只能有空格”的td元素会被选择</h3>
<table border="1">
  <tr>
    <td>有td元素无属性</td>
    <td title="">有td元素有title属性但属性值为空</td>
    <td title="c">有td元素有title属性属性值为c</td>
    <td title="c d">有td元素有title属性属性值为c d</td>
    <td title="c-d">有td元素有title属性属性值为c-d</td>
    <td title="cd">有td元素有title属性属性值为cd</td>
    <td title="d c">有td元素有title属性属性值为dc</td>
    <td title="dc">有td元素有title属性属性值为dc</td>
  </tr>
</table><br />

CSS2 td[title|="h"]

有title属性属性值为“h开头，且h只能为独立单词，后面可跟连字符”的会被选择

<h3>有title属性属性值为“h开头，且h只能为独立单词，后面可跟连字符”的会被选择</h3>
<table border="1">
  <tr>
    <td>有td元素无属性</td>
    <td title="">有td元素有title属性但属性值为空</td>
    <td title="h">有td元素有title属性属性值为h</td>
    <td title="h i">有td元素有title属性属性值为h i</td>
    <td title="h-i">有td元素有title属性属性值为h-i</td>
    <td title="hi">有td元素有title属性属性值为hi</td>
    <td title="i h">有td元素有title属性属性值为i h</td>
    <td title="i h j">有td元素有title属性属性值为i h j</td>
  </tr>
</table><br /><br />

CSS3 td[title^="l"]

有title属性属性值为"l开头"的td元素会被选择

<h3>有title属性属性值为"l开头"的td元素会被选择</h3>
<table border="1">
  <tr>
    <td>有td元素无属性</td>
    <td title="">有td元素有title属性但属性值为空</td>
    <td title="l">有td元素有title属性属性值为l</td>
    <td title="l m">有td元素有title属性属性值为l m</td>
    <td title="l-m">有td元素有title属性属性值为l-m</td>
    <td title="lm">有td元素有title属性属性值为lm</td>
    <td title="m l">有td元素有title属性属性值为m l</td>
    <td title="m l n">有td元素有title属性属性值为m l n</td>
  </tr>
</table><br />

CSS3 td[title$="o"]

有title属性属性值为"o结尾"的td元素会被选择

<h3>有title属性属性值为"o结尾"的td元素会被选择</h3>
<table border="1">
  <tr>
    <td>有td元素无属性</td>
    <td title="">有td元素有title属性但属性值为空</td>
    <td title="o">有td元素有title属性属性值为o</td>
    <td title="o p">有td元素有title属性属性值为o p</td>
    <td title="op">有td元素有title属性属性值为o-p</td>
    <td title="p o">有td元素有title属性属性值为po</td>
    <td title="p-o">有td元素有title属性属性值为p o</td>
    <td title="po">有td元素有title属性属性值为po</td>
  </tr>
</table><br />

CSS3 td[title*="x"]

有title属性属性值为"包含x"的td元素会被选择

<h3>有title属性属性值为"包含x"的td元素会被选择</h3>
<table border="1">
  <tr>
    <td>有td元素无属性</td>
    <td title="">有td元素有title属性但属性值为空</td>
    <td title="x">有td元素有title属性属性值为x</td>
    <td title="y">有td元素有title属性属性值为y</td>
    <td title="x y">有td元素有title属性属性值为x y</td>
    <td title="xy">有td元素有title属性属性值为xy</td>
    <td title="y x">有td元素有title属性属性值为y x</td>
    <td title="y-x">有td元素有title属性属性值为y-x</td>
    <td title="yx">有td元素有title属性属性值为yx</td>
  </tr>
</table>
</body>

伪类选择器

伪类名	含义
:root	选择文档的根元素，在 HTML 中永远是<html>元素
:last-child	向元素添加样式，且该元素是它的父元素的最后一个子元素
:nth-child(n)	向元素添加样式，且该元素是它的父元素的第 n 个子元素
:nth-last-child(n)	向元素添加样式，且该元素是它的父元素的倒数第 n 个子元素
:only-child	向元素添加样式，且该元素是它的父元素的唯一子元素
:first-of-type	向元素添加样式，且该元素是同级同类型元素中第一个元素
:last-of-type	向元素添加样式，且该元素是同级同类型元素中最后一个元素
:nth-of-type(n)	向元素添加样式，且该元素是同级同类型元素中第 n 个元素
:nth-last-of-type(n)	向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素
:only-of-type	向元素添加样式，且该元素是同级同类型元素中唯一的元素
:empty	向没有子元素（包括文本内容）的元素添加样式

#clean src/03_伪类选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>伪类选择器</title>
  <style>
    :root                 {font-size: 30px;}
    li:last-child         {color: #ff0000; }
    li:nth-child(3)       {color: #00ff00; }
    li:nth-last-child(3)  {color: #0000ff; }
    li:only-child         {color: #00ffff; }
    li:first-of-type      {font-size: 40px;}
    li:last-of-type       {font-size: 50px;}
    li:nth-of-type(3)     {font-size: 60px;}
    li:nth-last-of-type(3){font-size: 70px;}
    li:only-of-type       {font-size: 80px;}
    :empty{
      background-color:#ff0000;
      width: 100px;
      height: 30px;
    }
  </style>
</head>

<body>
  <ul style="float: left;">
    <li>一</li>
    <li>年</li>
    <li>好</li>
    <li>运</li>
    <li>随</li>
    <li>春</li>
    <li>到</li>
  </ul>
  <ul style="float:left;
             list-style-type:none;">
    <li>万事大吉</li>
  </ul>
  <ul style="float:left;
             list-style-type:square;">
    <li>四</li>
    <li>季</li>
    <li>彩</li>
    <li>云</li>
    <li>滚</li>
    <li>滚</li>
    <li>来</li>
  </ul>
  <p style="clear: both;">
    春联，又称“春贴”“门对”和“对联”。
  </p>
  <p></p>  <!--(1)-->
</body>
</html>

p 没有子元素

伪元素选择器

CSS3 新增了一批伪元素选择器，如下表所示。

伪元素名	含义
:enabled	向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
:disabled	向当前处于不可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
:checked	向当前处于选中状态的元素添加样式
:not(selector)	向不是 selector 元素的元素添加样式
:target	向正在访问的锚点目标元素添加样式
::selection	向用户当前选取内容所在的元素添加样式

#clean src/04_伪元素选择器.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>伪元素选择器</title>
    <style>
      :enabled {
        font-family: "隶书";
      }
      :disabled {
        font-family: "楷体";
        font-size: 30px;
      }
      :checked {
        outline: #ff0000 solid 3px;
      }
      p:not(.black) {
        color: #ff0000;
      }
      :target {
        border: 3px #ff0000 solid;
      }
      ::selection {
        color: #00ff00;
      }
    </style>
  </head>

  <body>
    <p><a href="#content1">跳转至内容1</a></p>
    <p><a href="#content2">跳转至内容2</a></p>
    <h1 id="content1">内容1</h1>  <!--(1)-->
    <input type="button" value="可用标准按钮" />
    <input type="button" value="不可用按钮" disabled="disabled" />
    <br />
    <input type="checkbox" name="" id="" value="可用标准按钮" />
    <input type="checkbox" name="" id="" value="可用标准按钮" />
    <h1 id="content2">内容2</h1>  <!--(1)-->
    <p class="black">建设宜居宜业和美乡村</p>
    <p>扎实推进农民农村共同富裕</p>
    <p>让精神富有成为共同富裕的底色</p>
    <p class="black">让小农户融入大产业、对接大市场</p>
  </body>
</html>

:target 向正在访问的锚点目标元素添加样式

CSS3 新增属性

背景属性

CSS3 新增了一些背景属性，如下表所示。

属性	含义	属性值	继承
background-clip	设置背景覆盖范围	border-box/padding-box/content-box	否
background-origin	设置背景覆盖的起点	border-box/padding-box/content-box	否
background-size	设置背景的大小	cover/contain/长度/百分比	否

background-clip 设置背景覆盖范围，它的属性值有以下 3 种。

border-box	背景显示区域到边框，默认值。
padding-box	背景显示区域到内边距框。
content-box	背景显示区域到内容框

backgoround-origin 在浏览器上，需要改写成 -webkit-background-orign 才能正常使用，在 CSS3 中增加了大量的浏览器专用属性，大体上可以划分为 4 种，如下表所示。

前缀	浏览器	示例	说明
-ms-	IE	-ms-animation	IE 专属 CSS 属性
-moz-	Firefox	-moz-animation	基于 Gecko 内核专属属性
-o-	Opera	-o-link	Opera 专属属性
-webkit-	Chrome	-webkit-background-origin	基于 Webkit 内核专属属性

background-origin 属性值与 background-clip 相同，表示背景覆盖的起点，但在使用过程中，由于背景会横向纵向重复，像纯色的背景，是看不出差别的。background-origin 属性值如下。

border-box	背景起点在边框的左上角
padding-box	背景起点在内边距框的左上角，默认值。
content-box	背景起点在内容框的左上角。

background-size 用于设置背景的大小

默认值	auto
给定长度、百分比	如果长度/百分比这种具体的数值只给定一个，表示高度使用 auto
使用 cover	图像拉伸到最大完全覆盖区域，可能会有一部分显示不全
使用 contain	将图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

#clean src/05_background-clip.html

Example: background-clip
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>background-clip</title> <style> div { width: 100px; height: 100px; padding: 20px; border: 5px dashed; /* float: left; */ margin: 5px; background: #ff0000; } </style> </head> <body> <div></div> <div style="background-clip: border-box">正文</div> <div style="background-clip: padding-box">正文</div> <div style="background-clip: content-box">正文</div> </body> </html>

Example: background-clip

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>background-clip</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px dashed;
        /* float: left; */
        margin: 5px;
        background: #ff0000;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div style="background-clip: border-box">正文</div>
    <div style="background-clip: padding-box">正文</div>
    <div style="background-clip: content-box">正文</div>
  </body>
</html>

#clean src/06_background-origin.html

background-origin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-origin</title> <style> div { width: 100px; height: 100px; padding: 20px; border: 5px dashed; float: left; margin: 5px; background-image:url(img/logo.png); } </style> </head>
<body> <div></div> <div style="-webkit-background-origin: border-box;">正文</div> <div style="-webkit-background-origin: padding-box;">正文</div> <div style="-webkit-background-origin: content-box;">正文</div> <br style="clear: both;"/> <div style="background-repeat: no-repeat;"></div> <div style="-webkit-background-origin: border-box;background-repeat: no-repeat;">正文</div> <div style="-webkit-background-origin: padding-box;background-repeat: no-repeat;">正文</div> <div style="-webkit-background-origin: content-box;background-repeat: no-repeat;">正文</div> </body> </html>

background-origin

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>background-origin</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      padding: 20px;
      border: 5px dashed;
      float: left;
      margin: 5px;
      background-image:url(img/logo.png);
    }
  </style>
</head>

<body>
  <div></div>
  <div style="-webkit-background-origin: border-box;">正文</div>
  <div style="-webkit-background-origin: padding-box;">正文</div>
  <div style="-webkit-background-origin: content-box;">正文</div>
  <br style="clear: both;"/>
  <div style="background-repeat: no-repeat;"></div>
  <div style="-webkit-background-origin: border-box;background-repeat: no-repeat;">正文</div>
  <div style="-webkit-background-origin: padding-box;background-repeat: no-repeat;">正文</div>
  <div style="-webkit-background-origin: content-box;background-repeat: no-repeat;">正文</div>
</body>
</html>

#clean src/07_background-size.html

background-size
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-size</title> <style> div { width:200px; height: 200px; border: 5px dashed; float: left; margin: 5px; background-image: url(img/logo.png); } </style> </head> <body> <div></div> <div style="background-size: 30px;"></div> <div style="background-size: 30px 60px;"></div> <div style="background-size: 30%;"></div> <div style="background-size: cover;"></div> <div style="background-size: contain;"></div> </body> </html>

background-size

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>background-size</title>
  <style>
      div {
          width:200px;
          height: 200px;
          border: 5px dashed;
          float: left;
          margin: 5px;
          background-image: url(img/logo.png);
      }
  </style>
</head>
<body>
  <div></div>
  <div style="background-size: 30px;"></div>
  <div style="background-size: 30px 60px;"></div>
  <div style="background-size: 30%;"></div>
  <div style="background-size: cover;"></div>
  <div style="background-size: contain;"></div>
</body>
</html>

#clean src/08_多背景图片.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多背景图片</title>
  <style>
  div {
    width: 400px; height: 400px;
    border: 5px dashed;
    float: left; margin: 5px;
    background-image: url(img/logo.png), url(img/logo.png),
                      url(img/logo.png), url(img/logo.png);
    background-repeat:   no-repeat, no-repeat,
                         no-repeat, no-repeat;
    background-position: left top, right top,
                         left bottom, right bottom;
    background-size: auto, 100px, 150px, 200px;
  }
  </style>
</head>
<body><div></div></body>
</html>

在 CSS3 之前，每个元素只能指定一个背景，如果同时指定背景图片和背景颜色，背景图片会覆盖背景颜色。
为了解决多背景图片问题，CSS3 修改了背景的所有参数，将原有参数扩展成可以输入多个属性值，并用逗号隔开。

CSS3 新增使用服务器字体

CSS3 增加了使用服务器字体的属性，支持字体文件格式有 ttf 和 otf 两种，基本格式如下：

@font-face {
  font-family: 字体名称;
  src: url(字体文件 url), local(该字体在本地的名称);
}

定义的字体名称，在其他地方直接使用作为 font-family 的参数值即可。
浏览器在解析该字体名称时，优先使用客户端的字体，找不到时才会使用服务器字体。
这样可以减轻服务器的压力，并节省用户的流量。

CSS3 新增文本属性

CSS3 新增了一些文本属性，如下表所示。

属性	含义	属性值	描述	继承
text-overflow	设置当文本超过元素框大小时的处理方式，该属性需要配合 overflow:hidden 和 white-space:nowrap 才能生效	clip	裁剪文本内容，默认值	否
text-overflow		ellipsis	显示省略号，用于代替被裁剪的文本内容	否
word-break	设置自动换行的处理方式	normal	默认值，使用浏览器默认的换行规则	是
		break-all	等同于使用了 word-wrap:break-word，允许在单词内换行
		keep-all	只能在半角空格或者连字符处换行，通常用在中文、日文、韩文等全角字符语言中
word-wrap	用于设置长单词是否允许换行显示到下一行	normal	默认值，表示只在允许的断字点换行	是
word-wrap	用于设置长单词是否允许换行显示到下一行	break-word	可以在长单词或者 URL 中间换行	是

#clean src/09_text-overflow.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS 新增文本属性</title>
</head>

<body>
  <p style="width: 200px; height: 30px; border: 1px solid;
            overflow: hidden; text-overflow: clip; white-space: nowrap;">
    奋进的中国之所以能量澎湃，是因为无数人在贡献力量。挖掘有价值的互联网好声音，描绘催人奋进的中国画卷，“五个一百” 正在推动一场网络正能量的时代接力，让向正向善日益成为人人心中的灯塔、脚下的自觉。
  </p>
  <p style="width: 200px;height: 30px;border: 1px solid;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
    奋进的中国之所以能量澎湃，是因为无数人在贡献力量。挖掘有价值的互联网好声音，描绘催人奋进的中国画卷，“五个一百” 正在推动一场网络正能量的时代接力，让向正向善日益成为人人心中的灯塔、脚下的自觉。
  </p>
</body>
</html>

#clean src/10_word-break.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>word-break</title>
</head>
<body>
  <p style="width: 180px; border: 1px solid;">  <!--(1)-->
    Knowledge advances by steps and not by leaps.
  </p>
  <p style="width: 180px; border: 1px solid;
            word-break: break-all;">  <!--(2)-->
    Knowledge advances by steps and not by leaps.
  </p>
  <p style="width: 180px; border: 1px solid;
            word-break: keep-all;">  <!--(3)-->
  奋斗创造奇迹，实干成就未来。伟大梦想不是等得来、喊得来的，
  而是拼出来、干出来的。
  </p>
</body>
</html>

浏览器默认的换行规则
等同于使用了 word-wrap:break-word，允许在单词内换行
只能在半角空格或者连字符处换行，通常用在中文、日文、韩文等全角字符语言中

#clean src/11_word-warp.html

////
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>word-warp</title>
</head>
<body>
////
<p style="width: 180px; border: 1px solid;">
  This paragraph contains a very long word:
  thisisaveryveryveryveryveryverylongword.
  The long word will not break and wrap to
  the next line.
</p>
<p style="width: 180px; border: 1px solid;
          word-wrap: break-word;">
  This paragraph contains a very long word:
  thisisaveryveryveryveryveryverylongword.
  The long word will break and wrap to
  the next line.
</p>
////
</body>
</html>
////

CSS3 新增盒模型属性

圆角边框 border-radius

CSS3 新增了一些盒模型属性，如下表所示。

类型	属性	含义	属性值	继承
圆角边框	border-top-left-radius	设置左上角圆角边框	长度/百分比通常我们只给定一个圆角半径即可如果给定两个值，则分别表示水平半径和垂直半径	否
	border-top-right-radius	设置右上角圆角边框
	border-bottom-left-radius	设置左下角圆角边框
	border-bottom-right-radius	设置右下角圆角边框
	border-radius	一条声明设置 4 个圆角边框

border-radius 一条声明可以一次性设置 4 个角的圆角属性，共需要 8 个参数

前 4 个分别表示左上、右上、右下、左下的水平半径值，用空格隔开
后 4 个分别表示左上、右上、右下、左下的垂直半径值
前后 4 个值用斜杠分割

border-radius：2em 1em 4em / 0.5em 3em; 的含义 https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius	border-top-left-radius：2em 0.5em；
	border-top-right-radius：1em 3em;
	border-bottom-right-radius：4em 0.5em；
	border-bottom-left-radius：1em 3em；

Note	border-radius 的值是通过对角线式复制的。（画图可以理解上面的含义，画图省略）如果省略了右上角，则 4 个角全部和左上角相同。

#clean src/12_圆角边框.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>圆角边框</title>
    <style>
      div {
        border: 10px solid #000000;
        width: 100px;
        height: 100px;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div
      style="border-top-left-radius: 10px;
             border-bottom-left-radius: 50% 20px">
    </div>
    <div style="border-radius:2em 1em 4em / 0.5em 3em"></div>
    <div style="border-radius:1em 10em / 1em 10em"></div>
  </body>
</html>

Figure 1. 运行结果

缺少的值从对角线取值

阴影 box-shadow

box-shadow 用于设置盒模型的一个或者多个阴影。它的属性值需要设置以下 6 个变量。

h-shadow	表示阴影的水平方向偏移的距离，是必须填写的变量。
v-shadow	表示阴影的垂直方向偏移的距离，是必须填写的变量。
blur	表示模糊的半径距离，该变量可以不写，是可选的。
spread	表示阴影额外增加的尺寸，负数表示减少的尺寸，该变量是可选的。
color	表示阴影的颜色，该变量是可选的。
inset	表示切换为内部阴影，该变量是可选的。

Note	如果需要设置多个阴影，则用逗号将每个阴影连接起来作为属性值。

#clean src/13_盒模型阴影.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS盒模型阴影</title>
  <style>
    div {
      border:1px solid #000000;
      width: 100px;
      height: 100px;
      margin: 20px;
      float: left;
    }
  </style>
</head>
<body>
  <div style="box-shadow: 10px 10px;"></div>
  <div style="box-shadow: 10px 10px 20px;"></div>
  <div style="box-shadow: 10px 10px 20px 5px;"></div>
  <div style="box-shadow: 10px 10px 20px 5px #ff0000;"></div>
  <div style="box-shadow: 10px 10px 20px 5px #ff0000 inset;"></div>
  <br style="clear:both;">
  <div style="border-radius: 10px 10px/10px 10px;
              box-shadow: 10px 10px;"></div>
  <div style="border-radius: 50px 50px/50px 50px;
              box-shadow: 100px 0px 5px #ff0000,
                          200px 0px 10px yellow,
                          300px 0px 15px green;"></div>
</body>
</html>

Figure 2. 运行结果

调整元素尺寸 resize

resize 属性用于设置元素是否可以由用户调整其尺寸，它的属性值可以是

none（无法调整）
both（可以调整元素的宽和高）
horizontal（可以调整元素的宽）
vertical（可以调整元素的高）

Note	如果需要此属性生效，那么需要设置元素的 overflow 属性，值可以是 auto、hidden 或者 scroll。

#clean src/14_resize.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>resize</title>
    <style>
      div {
        border: 2px solid;
        padding: 10px 40px;
        margin-bottom: 8px;
        width: 200px;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div>该窗体不能调整宽度和高度</div>
    <div style="resize: both">
      该窗体可以调整宽度和高度</div>
    <div style="resize: horizontal">
      该窗体可以调整宽度</div>
    <div style="resize: vertical">
      该窗体可以调高度</div>
  </body>
</html>

Figure 3. 运行结果

none（无法调整）
both（可以调整元素的宽和高）
horizontal（可以调整元素的宽）
vertical（可以调整元素的高）

轮廓偏移量 outline-offset

轮廓可以增加一个属性，即 outline-offset ，用于设置轮廓的偏移量。

初始值为 0
适用于所有元素

#clean src/15_outline-offset.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>outline-offset</title>
    <style>
      div {
        border: 2px solid #000000;
        padding: 10px 40px;
        width: 50px;
        height: 50px;
        margin-top: 5px;
        margin-left: 20px;
        outline: 2px red solid;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div style="outline-offset:15px">
    </div>
  </body>
</html>

Figure 4. 运行结果

CSS3 新增变形动画属性

CSS3 在原来的基础上增加变形和动画相关属性，通过这些属性，以前需要用JavaScript才能实现的功能，现在可以轻松地实现。

CSS3 的变形功能可以对元素进行位移、旋转、缩放、倾斜 4 种几何变换的操作；CSS3 的动画功能则是和位移、旋转、缩放、倾斜 4 种集合变换操作相结合，从而产生平滑的动画效果。

CSS3 的变形属性

CSS3 变形提供了两个属性，分别是 transform 和 transform-origin。

transform: 用于设置元素的变形，可以设置一个或者一个以上的变形函数。目前，transform 有 5 种基本变形函数可以选择。

translate(x,y)	表示元素水平方向移动 x，垂直方向移动 y，其中 y 可以省略，表示垂直方向没有位移。
	translateX(x)	表示元素水平方向移动 x
	translateY(y)	表示元素垂直方向移动 y
rotate(angle)	表示元素顺时针旋转 angle 角度，angle 的单位通常为 deg。
scale(x,y)	表示元素水平方向和垂直方向的缩放比分别为 x, y，其中 y 可以省略，表示 y 和 x 相同，以保持缩放比。
	scaleX(x)	表示元素水平方向缩放比为 x
	scaleY(y)	表示元素垂直方向的缩放比为 y
skewX() skewY() skew(angleX angleY) 降级使用	表示元素沿着 x 轴方向倾斜 angleX 角度，沿着 y 轴方向倾斜 angleY 角度，其中 angleY 可以省略，表示 y 轴方向不倾斜。
matrix(a,b,c,d,x,y)	将所有 2D 变形函数（旋转、缩放、移动及倾斜）组合在一起。
	a	决定 x 轴方向拉伸的倍数
	b	决定 y 轴方向拉伸的倍数
	c	决定 x 轴方向倾斜的角度
	d	决定 y 轴方向倾斜的角度
	x	表示 x 轴平移的距离
	y	表示 y 轴平移的距离

Caution

skew() 降级使用参考

skew() exists for compatibility reasons, and should not be used in new content. Use skewX() or skewY() instead, noting that the behavior of skew() is different from multiplying skewX() with skewY().

— MDN

transform-origin：表示元素旋转的中心点，默认值为 50% 50%。

第一个值表示元素旋转中心点的水平位置，它还可以赋值 left、right、center、长度、百分比。
第二个值表示元素旋转中心点的垂直位置，它还可以赋值 top、bottom、center、长度、百分比。

#clean src/16_CSS3变形_4钟变形函数.html

<head>

<head>
  <meta charset="UTF-8" />
  <title>CSS变形_4种变形函数</title>
  <style>
    div {
      margin: 10px;
      margin-top: 50px;
      height: 50px;
      width: 50px;
      border: 1px solid #000000;
      background-image: url(img/logo.png);
    }
  </style>
</head>

<body>

元素水平垂直方向移动和旋转角度

<div style="float: left"></div>
<div style="float: left; transform: translateX(30px)"></div>  <!--(1)-->
<div style="float: left; transform: translateY(30px)"></div>
<div style="float: left; transform: translate(20px, 20px)"></div>
<div style="float: left;
     transform:translateX(-10px) translateY(-10px)">  <!--(2)-->
</div>
<div style="float: left; transform: rotate(30deg)"></div>  <!--(3)-->
<hr style="clear: both" />  <!--(4)-->

div 正值移动
div 负值移动
div 顺时针旋转 30 角度
clear float

元素水平方向，垂直方向的缩放比

<div style="float: left"></div>
<div style="float: left; transform: scaleX(0.5)"></div>  <!--(1)-->
<div style="float: left; transform: scaleY(0.5)"></div>  <!--(2)-->
<div style="float: left; transform: scale(0.5, 0.5)"></div>  <!--(3)-->
<div style="float: left; transform: scaleX(1.5) scaleY(1.5)"></div>  <!--(4)-->
<hr style="clear: both" />

div 水平缩小
div 垂直缩小
div 水平垂直缩小
div 水平垂直放大

元素沿着x轴Y轴的倾斜角度

<div style="float: left"></div>
<div style="float: left; transform: skewX(30deg)"></div>  <!--(1)-->
<div style="float: left; transform: skewY(30deg)"></div>  <!--(2)-->
<div style="float: left; transform: skewX(30deg) skewY(30deg)"></div>  <!--(3)-->
<hr style="clear: both" />

div 沿着 x 轴方向倾斜 30 角度
div 沿着 y 轴方向倾斜 30 角度
div 沿着 x,y 轴方向倾斜各 30 角度

#clean src/17_CSS3变形_旋转中心点与顺时针旋转.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS变形_旋转中心点与顺时针旋转</title>
  <style>
    div {
      margin: 20px;
      margin-left: 30px;
      height: 50px;
      width: 50px;
      border: 1px solid #000000;
      background-image: url(img/logo.png);
    }
  </style>
</head>

<body>
  <div style="float: left;"></div>
  <div style="float: left; transform: rotate(45deg); left:-75px; position:relative;">  <!--(1)-->
  </div>
  <hr style="clear: both;"/>
  <div style="float: left;"></div>
  <div style="float: left; transform: rotate(45deg); left: -70px; position: relative;
              transform-origin: left top;"></div>  <!--(2)-->
  <hr style="clear: both;"/>
  <div style="float: left;"></div>
  <div style="float: left; transform: rotate(45deg); left: -70px; position: relative;
              transform-origin: 45px 60%;"></div>  <!--(3)-->
  <hr style="clear: both;"/>
</body>
</html>

向左偏移后，以中心点顺时针旋转 45度
向左偏移后，以 left top（左上角）顺时针旋转 45 度
向左偏移后，以水平 45px 垂直 60% 顺时针旋转 45 度

#clean src/18_CSS3变形_旋转中心点与倾斜.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS变形_旋转中心点与倾斜</title>
  <style>
    div {
      height: 100px;
      width: 100px;
      border: 1px solid #000000;
      background: #ff0000;
    }
  </style>
</head>

<body>
  <div style="position: absolute;
              transform: skewX(30deg); transform-origin:left top;"></div> <!--(1)-->
  <div style="position: absolute; background-color: transparent;">
    <p>沿着x轴正方向倾斜，既y轴增加30度角</p>
  </div>
  <div style="position: absolute; top:125px;
              transform: skewY(30deg); transform-origin: left top;"></div> <!--(2)-->
  <div style="position: absolute; background-color: transparent; top:125px;">
    <p>沿着y轴正方向倾斜，既x轴增加30度角</p>
  </div>
  <div style="position: absolute; top:300px;
              transform: skewX(30deg) skewY(30deg); transform-origin: left top;"></div> <!--(3)-->
  <div style="position: absolute; background-color: transparent; top:300px;">
    <p>沿着xy轴正方向倾斜，既xy轴同时增加30度角</p>
  </div>
</body>
</html>

absolute 脱离文档流，X 轴沿着左上角倾斜 30 度。
absolute 脱离文档流，Y 轴沿着左上角倾斜 30 度。
absolute 脱离文档流，XY 轴沿着左上角倾斜 30 度。

#clean src/19_CSS3变形_矩阵变形方法.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS3变形_矩阵变形方法</title>
  <style>
    div {
      height: 50px;
      width: 120px;
      margin-left: 40px;
      margin-top: 60px;
      border: 1px solid #000000;
      background-color: #ff0000;
    }
  </style>
</head>

<body>
  <div style="transform: skew(37deg,37deg); float: left;"></div>
  <div style="transform: matrix(1, 0.75, 0.75, 1, 0, 0); float: left;"></div>
  <hr style="clear:both;" />

  <div style="transform: skew(37deg,37deg) scale(0.5,0.5); float: left;"></div>
  <div style="transform: matrix(0.5, 0.375, 0.375, 0.5, 0, 0); float: left;"></div>
  <hr style="clear:both;" />

  <div style="transform:rotate(30deg); float:left;"></div>
  <div style="transform: matrix(0.861, 0.5, -0.5, 0.861, 0, 0); float: left;"></div>
  <hr style="clear:both;" />
</body>  <!--该例中 matrix 参数需自行研究-->
</html>

CSS3 3D变形属性

transform 属性，增加了 3 个变形函数。
1. rotateX：表示元素沿着 x 轴旋转。
2. rotateY：表示元素沿着 y 轴旋转。
3. rotateZ：表示元素沿着 z 轴旋转。
transform-style：用于设置嵌套的子元素在 3D 空间中显示的效果。它可以设置两个属性值：
1. flat（子元素不保留其 3D 位置，默认值）
2. preserve-3d（子元素保留它的 3D 位置）
prespective：设置成透视效果，透视效果为近大远小。
- 该属性值用于设置 3D 元素距离视图的距离，单位为像素，已经内置了，我们只需要写具体数值即可，默认值为 0
- 当为元素定义 prespective 属性时，其子元素会获得透视效果，而不是元素本身。
prespective-origin：设置 3D 元素所基于的 x 轴和 y 轴，改变 3D 元素的底部位置，该属性取值与 transform-origin 相同，默认值为50% 50%。
backface-visibility：用于设置当元素背面面向屏幕时是否可见，通常用于设置不希望用户看到旋转元素的背面。它的属性值有两个：
- visible（背面可见，默认值）
- hidden（背面不可见）

#clean src/20_CSS33D变形.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>CSS33D变形</title>
  <style>
    div {
      margin: 10px;
      width: 50px;
      height: 50px;
      border: 1px solid #000000;
      background-image: url(img/logo.png);
    }
  </style>
</head>

<body>
  <div style="float: left"></div>
  <div style="float: left; transform: rotateX(180deg)"></div>
  <div style="float: left; transform: rotateY(180deg)"></div>
  <div style="float: left; transform: rotateZ(180deg)"></div>
  <div style="float: left; transform: rotateX(60deg) rotateZ(180deg)"></div>
  <div style="float: left; transform: rotateX(60deg) rotateZ(180deg);
                                      transform-origin: center bottom;"></div>
</body>
</html>

#clean src/21_3D变形transform-style.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>3D变形transform-style</title>
  <style>
    .div1 {
      position: relative;
      margin: 10px;
      height: 200px;
      width: 200px;
      border: 1px solid #000000;
    }
    .div2 {
      position: absolute;
      padding: 40px;
      border: 1px solid #000000;
      background-color: #ff0000;
    }
    .div3 {
      position: absolute;
      padding: 30px;
      border: 1px solid #000000;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div class="div1" style="float: left">
    <div class="div2">RED
      <div class="div3">YELLOW</div>
    </div>
  </div>

  <div class="div1" style="float: left;" >
    <div class="div2" style="transform: rotateX(30deg)">RED
      <div class="div3">YELLOW</div>
    </div>
    <p style="position: absolute; bottom: 0">
      红色方块沿着x轴旋转30度，子元素黄色方块也跟着旋转了30度
    </p>
  </div>

  <div style="clear: both;"></div>

  <div class="div1" style="float: left">
    <div class="div2" style="transform: rotateX(30deg)">RED
      <div class="div3" style="transform: rotateY(30deg)">YELLOW</div>
    </div>
    <p style="position: absolute; bottom: 0">
      红色方块保持不变，黄色方块沿y轴旋转30度
    </p>
  </div>

  <div class="div1" style="float: left">
    <div class="div2" style="transform: rotateX(30deg); transform-style: preserve-3d">RED
      <div class="div3" style="transform: rotateY(30deg)">YELLOW</div>
    </div>
    <p style="position: absolute; bottom: 0">
      使用transform-style:preserve-3d,使子元素保留它的3D位置
    </p>
  </div>
</body>
</html>

#clean src/22_3D变形_透视效果.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D变形_透视效果</title>
  <style>
    .div1 {
      position: relative;
      margin: 10px;
      padding: 10px;
      width: 150px;
      height: 150px;
      border: 1px solid #000000;
      background-color: #ff0000;
    }
    .div2 {
      position: absolute;
      padding: 40px;
      border: 1px solid #000000;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div class="div1">RED
    <div class="div2">YELLOW</div>
  </div>
  <div class="div1" style="float: left;">RED
    <div class="div2" style="transform: rotateX(50deg);">YELLOW</div>
  </div>
  <div class="div1" style="float: left;-webkit-perspective:200;">RED
    <div class="div2" style="transform: rotateX(50deg)">YELLOW</div>
  </div>
  <div class="div1" style="float: left;-webkit-perspective:200;
                          -webkit-perspective-origin: left top;">RED
    <div class="div2" style="transform: rotateX(50deg);">YELLOW</div>
  </div>

  <br style="clear: both;"/>

  <div class="div1" style="float: left;transform: rotateY(50deg);
                           transform-style: preserve-3d;">RED
    <div class="div2" style="transform: rotateX(50deg);">YELLOW</div>
  </div>
  <div class="div1" style="float: left;transform: rotateY(50deg);
                          -webkit-perspective: 200;">RED
    <div class="div2" style="transform: rotateX(50deg);">YELLOW</div>
  </div>
  <div class="div1" style="float: left; transform: rotateY(50deg);
        -webkit-perspective: 200; transform-style: preserve-3d;">RED
    <div class="div2" style="float: left; transform: rotateX(50deg);">
      YELLOW
    </div>
  </div>
</body>
</html>

#clean src/23_3D变形_背面面向屏幕时是否可见.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D变形_背向屏幕时是否可见</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid #000000;
      background-color: #ff0000;
    }
  </style>
</head>
<body>
  <div>RED</div>  <!--(1)-->
  <div style="transform: rotateX(180deg);
              backface-visibility:hidden;">RED <!--(2)-->
  </div>
  <div style="transform: rotateX(180deg);">RED <!--(3)-->
  </div>
</body>
</html>

原始位置
沿 X 轴旋转 180 度后，背面不可见
沿 X 轴旋转 180 度后，背面可见

CSS3 过渡属性

CSS3 增加了一些过渡属性，可以为元素增加过渡动画效果，也可以设置在一定时间内逐渐从一种样式变成另一种样式。过渡涉及的属性如下表所示。

属性	含义	属性值	继承
transition-delay	设置过渡的延迟时间	time	否
transition-duration	设置过渡的过渡时间	time	否
transition-timing-function	设置过渡的时间曲线	linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(x1,y1,x2,y2)	否
transition-property	设置哪条 CSS 使用过渡	none/all/CSS 属性名称列表	否
transition	一条声明设置所有过渡属性	transition-delaytransition-durationtransition-timing-functiontransition-property	否

transition-delay：设置经过多长时间的延迟才开始执行过渡动画效果，单位通常为秒或者毫秒，默认值为 0
transition-duration：设置过渡动画效果持续的时间，单位通常为秒或者毫秒。该属性如果不设置或者设置为 0，则不会产生过渡动画效果。
transition-timing-function：设置过渡动画的时间曲线。该属性值有如下几个值。
- ease：慢速开始，然后变快，最后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- linear：以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,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(x1,y1,x2,y2)：贝济埃曲线控制动画的效果。
transition-property：设置对该元素的哪个 CSS 属性进行过渡动画效果处理
- 默认值为 all（所有元素都会获得过渡动画效果）
- 设置为 none（没有元素可以获得动画效果）和一些 CSS 标准属性（如 width、background-color 等）。
transition：用一条声明设置 transition-delay、transition-duration、transition-timing-function、transition-property 4 个属性。

#clean src/24_CSS3过渡.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 50px;
      height: 50px;
      background: #0000ff;
    }
    div:hover {
      width: 200px;
    }
  </style>
</head>
<body>
  <div style="transition-timing-function:linear;
              -webkit-transition-delay: 10ms;
              -webkit-transition-duration: 2s;
              -webkit-transition-timing-function: linear;
              -moz-transition-delay: 10ms;
              -moz-transition-duration: 2s;
              -moz-transition-timing-function: linear;
              -o-transition-delay: 10ms;
              -o-transition-duration: 2s;
              -o-transition-timing-function: linear;">
  </div>
  <br />
  <div style="background-color: #ff0000;
              transition: width 2s;
              -moz-transform: width 2s;
              -webkit-transform: width 2s;
              -o-transform: width 2s;">
  </div>
</body>
</html>

鼠标放在 div 上
div 2 秒后变长

#clean src/25_CSS3过渡2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS过渡</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #0000ff;
      }
      div:hover {
        width: 300px;
        height: 300px;
        background: #00ffff;
      }
    </style>
  </head>
  <body>
    <div
      style="
        transition: width 4s, height 4s, background-color 4s;
        -moz-trasition: width 4s, height 4s, background-color 4s;
        -webkit-trasition: width 4s, height 4s, background-color 4s;
        -o-trasition: width 4s, height 4s, background-color 4s;
      "
    ></div>  <!--(1)-->
  </body>
</html>

div 在 4s 内变大，并改变颜色。

CSS3 动画属性

CSS3 提供了强大的补间动画支持：animation，它可以做到一系列的图形变换（包括平移、缩放、旋转、改变透明度等）。在实际开发中，因为浏览器的兼容性，有时还需要加上 -moz-、-webkit-、-o- 等前缀。动画涉及的属性如下表所示。

属性	含义	属性值	继承
@keyframes	定义动画选择器	name 时间 CSS 样式	否
animation-name	使用 @keyframes 定义的动画	none/动画选择器定义的名字
animation-delay	设置动画的延迟时间	time
animation-duration	设置动画的持续动画时间	time
animation-timing-fuction	设置动画的时间曲线	linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(x1,y1,x2,y2)
animation-iteration-count	设置动画播放次数	数字/infinite
animation-direction	设置动画反向播放	normal/alternate
animation-play-state	设置动画播放状态	paused/running
transition	一条声明设置所有动画属性	animation-name animation-delay animation-duration animation-timing-fuction animation-iteration-count animation-direction

@keyframes：通过 @keyframes 规则可以创建动画。以百分比规定改变发生的时间，或者通过关键词“form”和“to”定义，等价于 0 和 100%，0 是动画的开始时间，100%是动画的结束时间。
animation-name：属性值为 @keyframes 动画规定名称，表示使用@keyframes 预先定义的动画。如果赋值为 none，表示无动画效果。
animation-delay：设置经过多长时间的延迟才开始执行动画效果，单位通常为秒或者毫秒，默认值为 0。
animation-duration：设置动画效果持续的时间，单位通常为秒或者毫秒。该属性如果不设置或者设置为 0，则不会产生动画效果。
animation-timing-fuction：设置过渡动画的时间曲线，它的属性值与 transition-timing-fuction 相同，可以设置为 linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(x1,y1,x2,y2)。
animation-iteration-count：设置动画播放的次数，如果设置为 infinite，则表示无限次播放。
animation-direction：设置动画是否应该轮流反向播放。如果属性值是 alternate，则动画会在奇数次数（1、3、5 等）正常播放，而在偶数次数（2、4、6 等）反向播放；默认值为 normal，表示动画正常播放。
animation-play-state：设置动画播放状态，属性值可以是 running（播放中）和 paused（暂停）。该属性值通常在 JavaScript 中使用，这样就能在播放过程中暂停动画。
transition：动画属性的简写属性，使用一条声明定义 animation-name、animation-delay、animation-duration、animation-timing-fuction、animation-iteration-count、animation-direction。

#clean src/26_CSS3动画.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS动画</title>
  <style>
    @keyframes turnaround {
      0%   {top:0px; left: 0px;   background: #ff0000;}
      25%  {top:0px; left: 100px; background: #ff0000;}
      50%  {top:0px; left: 100px; background: #ff0000;}
      75%  {top:0px; left: 0px;   background: #ff0000;}
      100% {top:0px; left: 0px;   background: #ff0000;}
    }
    @-moz-keyframes turnaround {
      0%   {top: 0px; left: 0px;   background: #ff0000;}
      25%  {top: 0px; left: 100px; background: #ff0000;}
      50%  {top: 0px; left: 100px; background: #ff0000;}
      75%  {top: 0px; left: 0px;   background: #ff0000;}
      100% {top: 0px; left: 0px;   background: #ff0000;}
    }
    @-o-keyframes turnaround {
      0%   {top: 0px; left: 0px;   background: #ff0000;}
      25%  {top: 0px; left: 100px; background: #ff0000;}
      50%  {top: 0px; left: 100px; background: #ff0000;}
      75%  {top: 0px; left: 0px;   background: #ff0000;}
      100% {top: 0px; left: 0px;   background: #ff0000;}
    }
    div {
      position: relative;
      width: 100px;
      height: 100px;
      background: #ff0000;
      animation: turnaround 5s infinite;
      -moz-animation: turnaround 5s infinite;
      -webkit-animation: turnaround 5s infinite;
      -o-animation: turnaround 5s infinite;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

Chrome 浏览器自动生成的 animation 参数如下：

-webkit-animation: turnaround 5s infinite;
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: turnaround;

CSS3 新增多列属性

CSS3 为文本排版增加了一种多列模式，如在一个 div 中实现文本左右分栏的效果。

在实际开发中，因为浏览器的兼容性，有时还需要加上 -moz-、webkit-、-o- 等前缀。多列用到的属性如下表所示。

属性	含义	属性值	继承
column-count	设置元素应该被分隔的列数	数字/auto	否
column-width	设置列的宽度	长度/auto	否
columns	一条声明设置列宽和列数	column-countcolumn-width	否
column-gap	设置列之间的间隔	长度/normal	否
column-span	设置元素应该横跨的列数	1/all	否
column-rule-style	设置列之间间隔的样式	none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset	否
column-rule-color	设置列之间间隔的颜色	颜色名/十六进制数/rbg 函数	否
column-rule-width	设置列之间间隔的宽度	thin/medium/thick/length	否
column-rule	一条声明设置列之间间隔所有属性	column-rule-style column-rule-color column-rule-width	否

column-count：用于设置元素应该被划分的列数，默认值为 auto，一般情况下等同于 1 列，可以自己指定具体数值表示要分成几列。
column-width：用于设置列的宽度，默认值为 auto，由浏览器和窗口决定，也可以指定长度确定列的宽度。
columns：一条属性快速定义 column-count 和 column-width。
column-gap：用于设置列之间间隔的宽度，默认值为 normal，表示一个常规长度（1 em），也可以指定长度确定列之间间隔的宽度。
column-span：用于设置元素横跨多少列，属性值只能为 1 或者 all，其中 1 为默认值。
column-rule-style：用于设置列之间的间隔样式，属性值可以是 none（无）、hidden（隐藏）、dotted（点）、dashed（虚线）、solid（实现）、double（双线）、groove（凹槽）、ridge（凸槽）、inset（凹入）、outset（凸起）。
column-rule-color：用于设置列之间间隔的颜色，属性值是一个颜色的表示值。
column-rule-width：用于设置列之间间隔的宽度，属性值可以是 thin（细）、medium（正常）、thick（粗），也可以自己指定宽度。
column-rule：用一条属性快速定义 column-rule-style、column-rule-color 和 column-rule-width。

#clean src/27_CSS3多列.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3多列</title>
  <style>
    div {
      column-count:3;
      column-width: auto;
      -moz-column-count:3;
      -moz-column-width: auto;
      -webkit-column-count:3;
      -webkit-column-width: auto;
    }
    .div1 {
      column-gap:50px;
      -moz-column-gap:50px;
      -webkit-column-gap:50px;
    }
  </style>
</head>
<body>
  <div>
    <h1>出师表——诸葛亮 出自《三国志诸葛亮传》卷三十五</h1>
    先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。
诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。
侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。
臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，
咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。
先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。
今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。
愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏，臣不胜受恩感激。
今当远离，临表涕零，不知所言。
  </div>
  <hr>
  <div class="div1"
       style="column-rule-style: dashed;
              column-rule-width: thick;
              column-rule-color:#ff0000;
              -moz-column-rule-style:dashed;
              -moz-column-rule-width: thick;
              -moz-column-rule-color:#ff0000;
              -webkit-column-rule-style:dashed;
              -webkit-column-rule-width: thick;
              -webkit-column-rule-color:#ff0000;
      ">
    <h1>出师表——诸葛亮 出自《三国志诸葛亮传》卷三十五</h1>
    先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。
诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。
侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。
臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，
咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。
先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。
今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。
愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏，臣不胜受恩感激。
今当远离，临表涕零，不知所言。
  </div>
  <hr>
</body>
</html>

Chrome 浏览器显示效果如下：

Swot/learning .gitee-modal { width: 500px !important; }

CSS3基础

学习任务

CSS3 简介

css3clickhart

caniuse

CSS3 优势

CSS3 新增选择器

兄弟选择器

#clean src/01_兄弟选择器.html

属性选择器

#clean src/02_属性选择器.html

<head>

<body>

CSS2 td[lang]

CSS2 td[title="a"]

CSS2 td[title~="c"]

CSS2 td[title|="h"]

CSS3 td[title^="l"]

CSS3 td[title$="o"]

CSS3 td[title*="x"]

伪类选择器

#clean src/03_伪类选择器.html

伪元素选择器

#clean src/04_伪元素选择器.html

CSS3 新增属性

背景属性

#clean src/05_background-clip.html

#clean src/06_background-origin.html

#clean src/07_background-size.html

#clean src/08_多背景图片.html

CSS3 新增使用服务器字体

CSS3 新增文本属性

#clean src/09_text-overflow.html

#clean src/10_word-break.html

#clean src/11_word-warp.html

CSS3 新增盒模型属性

圆角边框 border-radius

#clean src/12_圆角边框.html

阴影 box-shadow

#clean src/13_盒模型阴影.html

调整元素尺寸 resize

#clean src/14_resize.html

轮廓偏移量 outline-offset

#clean src/15_outline-offset.html

CSS3 新增变形动画属性

CSS3 的变形属性

#clean src/16_CSS3变形_4钟变形函数.html

<head>

<body>

元素水平垂直方向移动和旋转角度

元素水平方向，垂直方向的缩放比

元素沿着x轴Y轴的倾斜角度

#clean src/17_CSS3变形_旋转中心点与顺时针旋转.html

#clean src/18_CSS3变形_旋转中心点与倾斜.html

#clean src/19_CSS3变形_矩阵变形方法.html

CSS3 3D变形属性

#clean src/20_CSS33D变形.html

#clean src/21_3D变形transform-style.html

#clean src/22_3D变形_透视效果.html

#clean src/23_3D变形_背面面向屏幕时是否可见.html

CSS3 过渡属性

#clean src/24_CSS3过渡.html

#clean src/25_CSS3过渡2.html

CSS3 动画属性

#clean src/26_CSS3动画.html

CSS3 新增多列属性

#clean src/27_CSS3多列.html

简介

发行版

贡献者

语言

近期动态

搜索帮助

Swot/learning