css3新特性小结

作者: 菜菜的小阿允 | 来源:发表于2020-09-27 17:55 被阅读0次

一、选择器

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"的元素）
E:first-of-type：例p:first-of-type（选择每个p元素是其父级的第一个p元素）
E:last-of-type：例p:last-of-type（选择每个p元素是其父级的最后一个p元素）
E:only-of-type：例p:only-of-type（选择每个p元素是其父级的唯一p元素）
E:only-child：例p:only-child（选择每个p元素是其父级的唯一子元素）
E:nth-child(n)：例p:nth-child(2)（选择每个p元素是其父级的第二个子元素）
E:nth-last-child(n)：例p:nth-last-child(2)（选择每个p元素的是其父级的第二个子元素，从最后一个子项计数）
E:nth-of-type(n)：例p:nth-of-type(2)（选择每个p元素是其父级的第二个p元素）
E:nth-last-of-type(n)：例p:nth-last-of-type(2)（选择每个p元素的是其父级的第二个p元素，从最后一个子项计数）
E:last-child：例p:last-child（选择每个p元素是其父级的最后一个子级）
:root：选择文档的根元素
E:empty：例p:empty（选择每个没有任何子级的p元素（包括文本节点））
E:target：例 #news:target（选择当前活动的#news元素（包含该锚名称的点击的URL））
E:enabled：例input:enabled（选择每一个已启用的输入元素）
E:disabled：例input:disabled（选择每一个禁用的输入元素）
E:checked：例input:checked（选择每个选中的输入元素）
E:not(selector)：例:not(p)（选择每个并非p元素的元素）
E::selection：匹配元素中被用户选中或处于高亮状态的部分
E:out-of-range：匹配值在指定区间之外的input元素
E:in-range：匹配值在指定区间之内的input元素
E:read-write：用于匹配可读及可写的元素
E:read-only：用于匹配设置 "readonly"（只读）属性的元素
E:optional：用于匹配可选的输入元素
E:required：用于匹配设置了 "required" 属性的元素
E:valid：用于匹配输入值为合法的元素
E:invalid：用于匹配输入值为非法的元素

二、边框

border-image可以使用图片来绘制边框
border-radius创建圆角边框
box-shadow可以为元素添加阴影

div{ 
    border:2px solid #e0e0e0; 
    border-radius:25px; 
    box-shadow: 10px 10px 5px #888888; 
    border-image:url(border.png) 30 30 round; 
}

三、背景

CSS3新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break。

background-clip

background-clip属性用于确定背景画区，有以下几种可能的属性：

background-clip: border-box; 背景从border开始显示
background-clip: padding-box; 背景从padding开始显示
background-clip: content-box; 背景显content区域开始显示
background-clip: no-clip; 默认属性，等同于border-box

通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。

background-origin

background-clip属性用于确定背景的位置，它通常与background-position联合使用，可以从 border、padding、content来计算background-position（就像background-clip）。

background-origin: border-box; 从border开始计算background-position
background-origin: padding-box; 从padding开始计算background-position
background-origin: content-box; 从content开始计算background-position

background-size

background-size属性常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：

background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包含元素的尺寸

background-break

CSS3中，元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。

background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景。

div{ 
    background:url(img_flwr.gif); 
    background-repeat:no-repeat; 
    background-size:100% 100%; 
    background-origin:content-box;
} 
多背景 
body{ 
    background-image:url(img_flwr.gif),url(img_tree.gif); 
}

四、渐变

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

background: linear-gradient(direction, color-stop1, color-stop2, ...);
background: radial-gradient(center, shape size, start-color, ..., last-color);

五、文本效果

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版本有关于@font-face规则描述。您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

<style>
    @font-face{
        font-family: myFirstFont;
        src: url(sansation_light.woff);
    }
    div{
        font-family:myFirstFont;
    }
</style>

七、CSS3 转换和变形

2D新转换属性

transform：适用于2D或3D转换的元素。
transform-origin：允许您更改转化元素位置。

2D转换方法

matrix(n,n,n,n,n,n)：定义 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 旋转，在参数中规定角度。
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。

3D转换属性

transform：向元素应用 2D 或 3D 转换。
transform-origin:允许你改变被转换元素的位置。
transform-style: 规定被嵌套元素如何在 3D 空间中显示。
perspective: 规定 3D 元素的透视效果。
perspective-origin：规定 3D 元素的底部位置。
backface-visibility：定义元素在不面对屏幕时是否可见。

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 转换元素的透视视图。

八、CSS3 过渡

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

div{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;/* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;-
    webkit-transition-delay:2s;
}

九、CSS3 动画

要创建CSS3动画，你需要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
@keyframes 规则和所有动画属性如下：

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

div{
    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 and 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;
}
@keyframes myfirst{
    0% {
        background: red;
    }
    25% {
        background: yellow;
    }
    50% {
        background: blue;
    }
    100% {
        background: green;
    }
}

十、CSS3 多列

CSS3 的多列属性：

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 的简写。

十一、CSS3 用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：

resize：指定一个元素是否应该由用户去调整大小（none | both | horizontal | vertical | inherit），如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
box-sizing: 允许以确切的方式定义适应某个区域的具体内容（content-box | border-box | inherit）
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

十二、CSS3伸缩布局盒模型(弹性盒)

弹性盒子中常用到的属性:

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：设置弹性盒子的子元素如何分配空间。

十三、多媒体查询

使用媒体类型
<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) { ... }