css3新特性
css3选择器
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| .class | .intro | 选择所有class="intro"的元素 |
| #id | #firstname | 选择所有id="firstname"的元素 |
| * | * | 选择所有元素 |
| element | p | 选择所有< p>元素 |
| element,element | div,p | 选择所有< div>元素和 < p>元素 |
| element element | div p | 选择< div>元素内的所有< p>元素 |
| element>element | div>p | 选择所有父级是 < div> 元素的 < p> 元素 |
| element+element | div+p | 选择所有紧接着< div>元素之后的< p>元素 |
| [attribute] | [target] | 选择所有带有target属性元素 |
| [attribute=value] | [target=-blank] | 选择所有使用target="-blank"的元素 |
| [attribute~=value] | [title~=flower] | 选择标题属性包含单词"flower"的所有元素 |
[attribute|=language] |
[lang | =en] |
选择一个lang属性的起始值="EN"的所有元素 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择活动链接 |
| :hover | a:hover | 选择鼠标在链接上面时 |
| :focus | input:focus | 选择具有焦点的输入元素 |
| :first-letter | p:first-letter | 选择每一个< P>元素的第一个字母 |
| :first-line | p:first-line | 选择每一个< P>元素的第一行 |
| :first-child | p:first-child | 指定只有当< p>元素是其父级的第一个子级的样式。 |
| :before | p:before | 在每个< p>元素之前插入内容 |
| :after | p:after | 在每个< p>元素之后插入内容 |
| :lang(language) | p:lang(it) | 选择一个lang属性的起始值="it"的所有< p>元素 |
| element1~element2 | p~ul | 选择p元素之后的每一个ul元素 |
| [attribute^=value] | a[src^=“https”] | 选择每一个src属性的值以"https"开头的元素 |
| [attribute$=value] | a[src$=".pdf"] | 选择每一个src属性的值以".pdf"结尾的元素 |
| [attribute*=value] | a[src*=“44lan”] | 选择每一个src属性的值包含子字符串"44lan"的元素 |
| :first-of-type | p:first-of-type | 选择每个p元素是其父级的第一个p元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 |
| :only-of-type | p:only-of-type | 选择每个p元素是其父级的唯一p元素 |
| :only-child | p:only-child | 选择每个p元素是其父级的唯一子元素 |
| :nth-child(n) | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 |
| :last-child | p:last-child | 选择每个p元素是其父级的最后一个子级 |
| :root | :root | 选择文档的根元素 |
| :empty | p:empty | 选择每个没有任何子级的p元素（包括文本节点） |
| :target | #news:target | 选择当前活动的#news元素（包含该锚名称的点击的URL） |
| :enabled | input:enabled | 选择每一个已启用的输入元素 |
| :disabled | input:disabled | 选择每一个禁用的输入元素 |
| :checked | input:checked | 选择每个选中的输入元素 |
| :not(selector) | :not§ | 选择每个并非p元素的元素 |
| ::selection | ::selection | 匹配元素中被用户选中或处于高亮状态的部分 |
| :out-of-range | :out-of-range | 匹配值在指定区间之外的input元素 |
| :in-range | :in-range | 匹配值在指定区间之内的input元素 |
| :read-write | :read-write | 用于匹配可读及可写的元素 |
| :read-only | :read-only | 用于匹配设置 “readonly”（只读） 属性的元素 |
| :optional | :optional | 用于匹配可选的输入元素 |
| :required | :required | 用于匹配设置了 “required” 属性的元素 |
| :valid | :valid | 用于匹配输入值为合法的元素 |
| :invalid | :invalid | 用于匹配输入值为非法的元素 |
CSS3 边框（Borders）
用CSS3，可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序
| 属性 | 说明 |
|---|---|
| border-image | 设置所有边框图像的速记属性 |
| border-radius | 一个用于设置所有四个边框- *-半径属性的速记属性 |
| box-shadow | 附加一个或多个下拉框的阴影 |
div{ width:60px;color:greenyellow;border:10px solid;border-radius:25px;box-shadow: 10px 10px 5px #888888;
}
CSS3 背景
CSS3中包含几个新的背景属性，提供更大背景元素控制。
| 顺序 | 描述 |
|---|---|
| background-clip | 规定背景的绘制区域 |
| background-origin | 规定背景图片的定位区域 |
| background-size | 规定背景图片的尺寸 |
div
{height:300px;width:400px;background:url(2.jpg);background-repeat:no-repeat;background-size:100% 100%;background-origin:content-box;
}
多背景
div
{height:300px;width:400px;background-color: aqua;background:url(1.jpg),url(2.jpg);//当第一张背景图片可以找到就显示第一张背景图片，如果实现则会显示第二张背景图片background-repeat:no-repeat;background-size:100% 100%;background-origin:content-box;}
CSS3 渐变
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background: linear-gradient(direction, color-stop1, color-stop2, ...);
示例：
div{height: 150px;width:200px;background-color: coral ;/* 不支持线性的时候显示 */background-image: linear-gradient(to bottom right, coral, greenyellow);}
使用角度
如果想要在渐变的方向上做更多的控制，可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
语法
background-image: linear-gradient(angle, color-stop1, color-stop2);
使用透明度（transparent）
CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
div{height: 150px;width:200px;background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}
重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变：
div{height: 150px;width:200px;background-color: burlywood; /* 浏览器不支持的时候显示 */background-image: repeating-linear-gradient(190deg,coral ,cornflowerblue 17%,burlywood 30%); }
径向渐变（Radial Gradients）- 由它们的中心定义
background: radial-gradient(center, shape size, start-color, ..., last-color);
设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
div{height: 150px;width:200px;background-image: radial-gradient(circle, mediumspringgreen, powderblue, greenyellow);}
不同尺寸大小关键字的使用
size 参数定义了渐变的大小。它可以是以下四个值：
- closest-side
- farthest-side
- closest-corner
- farthest-corner
div{ height: 150px;width: 150px;color:mediumspringgreen;border:3px solid;background-color: red; /* 浏览器不支持的时候显示 */background-image: radial-gradient(closest-side at 60% 55%, red, yellow, white); }
重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变：
div{ height: 150px;width: 150px;background-image: repeating-radial-gradient(red, yellow 10%, green 15%);}
CSS3 文本效果
| 属性 | 描述 |
|---|---|
| hanging-punctuation | 规定标点字符是否位于线框之外 |
| punctuation-trim | 规定是否对标点字符进行修剪 |
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色 |
| text-justify | 规定当 text-align 设置为 “justify” 时所使用的对齐方法 |
| text-outline | 规定文本的轮廓 |
| text-overflow | 规定当文本溢出包含元素时发生的事情 |
| text-shadow | 向文本添加阴影 |
| text-wrap | 规定文本的换行规则 |
| word-break | 规定非中日韩文本的换行规则 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行 |
CSS3 字体
以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。使用CSS3，网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。所选择的字体在新的CSS3版本有关于@font-face规则描述。"自己的"的字体是在 CSS3 @font-face 规则中定义的。
<style>
@font-face{font-family: Cx;src: url(../Font/Cx/Cx.ttf);
}
div
{
font-family:Cx;
}
</style>
css3动画
要创建CSS3动画，你需要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
@keyframes 规则和所有动画属性：
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性 |
| animation-name | 规定 @keyframes 动画的名称 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease” |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 |
| animation-delay | 规定动画何时开始。默认是 0 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal” |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 “running” |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画实例</title>
<style>
div
{width:100px;height:100px;background:red;position:relative;//方法一animation-name: myfirst;animation-duration: 5s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;animation-play-state: running;/* Safari 与 Chrome: */-webkit-animation-name: myfirst;-webkit-animation-duration: 5s;-webkit-animation-timing-function: linear;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running;//方法二animation:myfirst 5s linear 2s infinite alternate;/* Firefox: */-moz-animation:myfirst 5s linear 2s infinite alternate;/* Safari and Chrome: */-webkit-animation:myfirst 5s linear 2s infinite alternate;/* Opera: */-o-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;}
}@-moz-keyframes myfirst /* Firefox */
{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 /* Safari and Chrome */
{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;}
}@-o-keyframes myfirst /* Opera */
{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;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3 多列
CSS3 多列属性：
| 属性 | 描述 |
|---|---|
| column-count | 指定元素应该被分割的列数 |
| column-fill | 指定如何填充列 |
| column-gap | 指定列与列之间的间隙 |
| column-rule-color | 指定两列间边框的颜色 |
| column-rule-style | 指定两列间边框的样式 |
| column-rule-width | 指定两列间边框的厚度 |
| column-span | 指定元素要跨越多少列 |
| column-width | 指定列的宽度 |
| columns | 设置 column-width 和 column-count 的简写 |
| column-rule | 所有 column-rule-* 属性的简写 |
CSS3 盒模型
在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：
- resize：none | both | horizontal | vertical | inherit
- box-sizing: content-box | border-box | inherit
- outline:outline-color outline-style outline-width outine-offset
resize属性指定一个元素是否应该由用户去调整大小。
box-sizing 属性允许以确切的方式定义适应某个区域的具体内容。
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
CSS3伸缩布局盒模型(弹性盒)
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
下表列出了在弹性盒子中常用到的属性:
| 属性 | 描述 |
|---|---|
| display | 指定 HTML 元素盒子类型 |
| flex-direction | 指定了弹性容器中子元素的排列方式 |
| justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式 |
| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式 |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| order | 设置弹性盒子的子元素排列顺序 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性 |
| flex | 设置弹性盒子的子元素如何分配空间 |
CSS3 多媒体查询
从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。
使用媒体类型
<link rel="stylesheet" type="text/css" href="site.css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />
媒体查询规则
@media all and (min-width: 800px) { ... }@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。
(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。
and 条件
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }
or 关键词
@media (min-width:800px) or (orientation:portrait) { ... }
使用 not
@media (not min-width:800px) { ... }
CSS 多媒体查询，适配各种设备尺寸
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS 多媒体查询，适配各种设备尺寸</title><style>.example {padding: 20px;color: white;}/* Extra small devices (phones, 600px and down) */@media only screen and (max-width: 600px) {.example {background: red;}}/* Small devices (portrait tablets and large phones, 600px and up) */@media only screen and (min-width: 600px) {.example {background: green;}}/* Medium devices (landscape tablets, 768px and up) */@media only screen and (min-width: 768px) {.example {background: blue;}} /* Large devices (laptops/desktops, 992px and up) */@media only screen and (min-width: 992px) {.example {background: orange;}} /* Extra large devices (large laptops and desktops, 1200px and up) */@media only screen and (min-width: 1200px) {.example {background: pink;}}</style></head><body><h2>响应式判断</h2><p class="example">操作浏览器窗口，查看效果。</p></body>
</html>
参考原文：https://www.cnblogs.com/star91/p/5659134.html