CSS学习笔记(十一) CSS3新特性

时间：2020-01-31 23:42:10 收藏：0 阅读：64

这篇文章我们将会介绍 CSS3 中一些常用的新特性

1、选择器

（1）基本选择器

基本选择器	语法	描述
通配选择器	*	选择所有 HTML 元素
元素选择器	E	选择指定类型的 HTML 元素
id 选择器	#id	选择 id 为指定值的 HTML 元素
class 选择器	.class	选择 class 为指定值的 HTML 元素

（2）层次选择器

层次选择器	语法	描述
后代选择器	E F	选择所有 E 的后代元素 F
子代选择器	E>F	选择所有 E 的子代元素 F
相邻兄弟选择器	E+F	选择 E 后面的第一个兄弟元素 F
通用兄弟选择器	E~F	选择 E 后面的所有的兄弟元素 F

（3）属性选择器

语法	描述
[attribute]	选择具有指定属性的元素
[attribute=value]	选择具有指定属性且属性值为 value 的元素
[attribute^=value]	选择具有指定属性且属性值以 value 开头的元素
[attribute$=value]	选择具有指定属性且属性值以 value 结尾的元素
[attribute*=value]	选择具有指定属性且属性值中包含 value 的元素
[attribute~=value]	选择具有指定属性且属性值中包含指定词汇 value 的元素
[attribute\|=value]	选择具有指定属性且属性值中包含以指定词汇 value 开头的元素

（4）伪元素

语法	描述
E::first-letter	向文本的第一个字添加特殊样式，只能用于块级元素
E::first-line	向文本的第一个行添加特殊样式，只能用于块级元素
E::before	在元素之前添加特殊样式
E::after	在元素之后添加特殊样式
E::selection	对选中的文本添加特殊样式

（5）伪类

动态伪类选择器

语法	描述
E:link	选择未被访问的锚点元素 E
E:visited	选择已被访问的锚点元素 E
E:hover	选择鼠标悬浮的元素 E
E:active	选择已被激活的元素 E
E:focus	选择获得焦点的元素 E

元素状态伪类选择器

语法	描述
E:checked	选择已被选中的按钮元素 E
E:enabled	选择启用的表单元素 E
E:disabled	选择禁用的表单元素 E

结构伪类选择器

语法	描述
E:first-child	选择作为父元素的第 1 个子元素的元素 E
E:nth-child(n)	选择作为父元素的第 n 个子元素的元素 E
E:last-child	选择作为父元素的最后一个子元素的元素 E
E:only-child	选择作为父元素的唯一一个子元素的元素 E
E:fitst-of-type	选择作为父元素内具有指定类型的第 1 个子元素 E
E:nth-of-type(n)	选择作为父元素内具有指定类型的第 n 个子元素 E
E:last-of-type	选择作为父元素内具有指定类型的最后一个子元素 E
E:only-of-type	选择作为父元素内具有指定类型的唯一一个子元素 E
E:root	选择作为根元素的元素 E，例如 `html:root`
E:empty	选择没有子元素的元素 E

目标伪类选择器

语法	描述
E:target	被指定 URL 指向的元素 E

否定伪类选择器

语法	描述
E:not(F)	符合要求 E 但不符合要求 F 的元素

2、颜色

在 CSS3 之前，表示颜色可以使用以下三种方法：

关键字表示法，例如黑色可以表示为 black，白色可以表示为 white
十六进制格式，例如黑色可以表示为 #000000，白色可以表示为 #FFFFFF
rgb()，例如黑色可以表示为 rgb(0,0,0)，白色可以表示为 rgb(255,255,255)

而在 CSS3 中，又新增三种方法，分别是：

hsl()：h 表示色调 (hue)，s 表示饱和度 (saturate)，l 表示亮度 (lightness)
- hue：数值，取值范围为 0 ~ 359，例如红色为 0，绿色为 120，蓝色为 240
- saturate：百分比，100% 为实际色调，0% 为灰色
- lightness：百分比，50% 为实际色调，0% 为黑色，100% 为白色
rgba()：r 表示红色 (red)，g 表示绿色 (green)，b 表示蓝色 (blue)，a 表示不透明度 (alpha)
- alpha：百分比，0% 为完全透明，100% 为完全不透明
hsla()：h 表示色调 (hue)，s 表示饱和度 (saturate)，l 表示亮度 (lightness)，a 表示不透明度 (alpha)

3、阴影

我们既可以为块级元素添加阴影，也可以为文字添加阴影

（1）块级元素阴影

我们可以使用 box-shadow 为块级元素添加阴影

box-shadow: offset-x offset-y blur-radius spread-radius color inset;

offset-x：水平偏移位置，必需
offset-y：垂直偏移位置，必需
blur-radius：模糊距离，可选，指定阴影的模糊程度
spread-radius：阴影半径，可选，指定阴影的区域大小
color：阴影颜色，可选，默认值是黑色
inset：默认情况下设置的阴影是外部阴影，使用 inset 可以将阴影设置为内部阴影

（2）文字阴影

我们可以使用 text-shadow 属性为文字添加阴影

text-shadow: offset-x offset-y blur-radius color;

offset-x：水平偏移位置，必需
offset-y：垂直偏移位置，必需
blur-radius：模糊距离，可选，指定阴影的模糊程度
color：阴影颜色，可选，默认值是黑色

4、渐变

渐变效果有两种类型，分别是线性渐变（Linear Gradient）和径向渐变（Radial Gradient）

线性渐变：渐变效果向下、向右或向对角方向展开
径向渐变：渐变效果从中心开始向四周展开

（1）线性渐变

可以将 background-image 属性的值设置为 linear-gradient 添加线性渐变效果

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction：指定渐变方向，下面列举几个常见的值：
- to bottom：渐变方向从上到下展开，默认值
- to right：渐变效果从左到右展开
- to bottom right：渐变方向从左上到右下展开
- <degree>：水平线和渐变线之间的角度，按逆时针方向计算
color-stop1, color-stop2, ...：指定渐变颜色

（2）径向渐变

可以将 background-image 属性的值设置为 radial-gradient 添加线性渐变效果

background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

shape：指定形状，取值分别是 ellipse 和 circle，默认是 ellipse
size：指定尺寸，取值分别是 closest-side、farthest-side、closest-corner、farthest-corner
position：中心点的所在位置，它由两个百分数值决定
color-stop1, color-stop2, ...：指定渐变颜色

5、反射

通过 box-reflect 属性我们可以实现镜面效果

box-reflect：direction offset mask-box-image

direction：反射方向，取值如下：
- above：倒影出现在原对象的上方
- below：倒影出现在原对象的下方
- left：倒影出现在原对象的左方
- right：倒影出现在原对象的右方
offset：倒影与原对象之间的间距
mask-box-image：遮罩效果，图片或者渐变

6、字体

@font-face 规则用来加载字体，它甚至可以让我们使用服务端的字体文件，一个例子如下：

@font-face
{
    /* font-family 属性指定字体名称 */
    font-family: myFont;
    /* src 属性指定资源位置 */
    src: url('myFont.ttf'), url('myFont.eot')/* IE9 */;
}

然后就能在文件中直接使用，例子如下：

.use-my-font {
    font-family: myFont; /* 自定义的字体名称 */
}

7、过渡

通过 CSS3，我们可以在不使用 Flash 或 JavaScript 的情况下，使得元素在样式转换时添加过渡效果

使用 transition 属性可以添加过渡效果

transition: property duration timing-function delay;

property：应用过渡效果的属性名称，当指定的属性改变时，过渡效果开始作用，取值如下：
- none：表示没有属性获得过渡效果
- all：表示所有属性获得过渡效果
- 名称列表：指定获得过渡效果的属性，列表以逗号分隔
duration：过渡效果的作用时间，其接受一个时间值，默认为 0
timing-function：过渡效果的速度曲线，取值如下：
- linear：以相同的速度从开始至结束
- ease：默认值，以慢速开始，然后变快，以慢速结束
- ease-in：以慢速开始
- ease-out：以慢速结束
- ease-in-out：以慢速开始，以慢速结束
delay：延迟过渡效果的开始时间，其接受一个时间值，默认为 0

<!DOCTYPE HTML>
<html>
<head>
    <style>
    div {
        width: 100px;
        height: 100px;
        background: LightSkyBlue;
    }
    .with-transition {
        transition: width 1s ease;
        -o-transition: width 1s ease;      /* Opera */
        -moz-transition: width 1s ease;    /* Firefox */
        -webkit-transition: width 1s ease; /* Safari and Chrome */
    }
    div:hover {
        /* 当鼠标停留在 div 元素上时，width 将会变化，从而产生过渡效果 */
        width: 300px;
    }
    </style>
</head>
<body>
    <div></div>
    <br/>
    <div class="with-transition"></div>
</body>
</html>

8、动画

通过 CSS3，我们可以在不使用 Flash 或 JavaScript 的情况下，为网页创建动画

可以使用 animation 属性，定义动画属性

animation: name duration timing-function delay iteration-count direction;

name：动画名称
duration：动画效果的作用时间，其接受一个时间值，默认为 0
timing-function：动画效果的速度曲线，取值如下：
- linear：以相同的速度从开始至结束
- ease：默认值，以慢速开始，然后变快，以慢速结束
- ease-in：以慢速开始
- ease-out：以慢速结束
- ease-in-out：以慢速开始，以慢速结束
delay：延迟动画效果的开始时间，其接受一个时间值，默认为 0
iteration-count：动画的播放次数，取值如下：
- 数字：表示播放次数，默认为 1
- infinite：表示无限播放
direction：动画的播放方向，取值如下：
- normal：正常播放，默认值
- alternate：轮流反向播放

然后使用 @keyframes 规则，定义动画如何播放，其原理是将一套 CSS 样式逐渐变换成另一套 CSS 样式

通过百分比定义关键帧，也可以通过关键字 from(0%) 和 to(100%)，并在关键帧中指定 CSS 样式，例子如下：

<!DOCTYPE HTML>
<html>
<head>
    <style>
    div {
        width: 100px;
        height: 100px;
        background: LightSkyBlue;
        position: relative;
        animation: test 2s linear infinite alternate;
        -webkit-animation: test 2s linear infinite alternate; /* Safari and Chrome */
    }
    @keyframes test {
        /* 动画开始，left 为 0px；动画结束，left 为 200px */
        from { left: 0px; }
        to { left: 200px; }
    }
    @-webkit-keyframes test { /* Safari and Chrome */
        from { left: 0px; }
        to { left: 200px; }
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

9、转换

使用 transform 属性，我们可以使得元素变形，包括平移、旋转、缩放和倾斜

平移，参数 x、y、z 分别定义沿着 X 轴、Y 轴、Z 轴的移动距离

translate(x,y)、translate3d(x,y,z)、translateX(x)、translateY(y)、translateZ(z)
旋转，参数 x、y、z 分别定义沿着 X 轴、Y 轴、Z 轴的旋转矢量，angle 定义顺时针旋转角度

rotate(angle)、rotate3d(x,y,z,angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)
缩放，参数 x、y、z 分别定义沿着 X 轴、Y 轴、Z 轴的缩放倍数

scale(x,y)、scale3d(x,y,z)、scaleX(x)、scaleY(y)、scaleZ(z)
倾斜，参数 x-angle、y-angle 分别定义与 X 轴、Y 轴的倾斜夹角，该操作会导致形状发生变化

skew(x-angle,y-angle)、skewX(x-angle)、skewY(y-angle)

【阅读更多 CSS 系列文章，请看 CSS学习笔记】

原文：https://www.cnblogs.com/wsmrzx/p/12247177.html