CSS3新特性

墨蓝 2023-01-15 03:49 103阅读 0赞

**目录**

1、新增CSS选择器

2、圆角（border-radius）

3、阴影（box-shadow）

4、文字特效（text-shadow）

5、旋转（transform）

6、渐变（gradients）

--------------------

*  新增CSS选择器
 *  圆角（border-radius）
 *  阴影和反射（box-shadow）
 *  文字特效（text-shadow）
 *  旋转（transform）
 *  渐变（gradients）
 *  多列布局
 *  过渡动画（transition）
 *  动画（animation）

## 1、新增CSS选择器 ##

**新增结构伪类选择器：**

1.  E:root 匹配文档所在的根元素
2.  E:nth-child(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素也参与排序，若第n个子元素不是E元素，则该语句没有效果（注意这里的n从1开始）
3.  E:nth-last-child(n) 匹配E所在父元素倒数第n个匹配E的元素
4.  E:nth-of-type(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素不参与排序(n同样是从1开始）注意区别nth-child(n)
5.  E:last-child
6.  E:first-of-type
7.  E:last-of-type
8.  E:only-child
9.  E:only-of-type
10. E:empty

**UI元素状态伪类选择器：**

1.  E:enabled
2.  E:disabled
3.  E:checked

**新增属性选择器：**

1.  E\[foo^='bar'\] 匹配E元素，该元素包含foo属性，且foo属性值以bar开头
2.  E\[foo$='bar'\] 匹配E元素，该元素包含foo属性，且foo属性值以bar结尾
3.  E\[foo\*='bar'\] 匹配E元素，该元素包含foo属性，且foo属性值包含bar字符串

**css3新增的其他选择器列表：**

1.  E~F：选择匹配F的所有元素，且匹配元素位于匹配E的元素后面（EF需要同级）
2.  E:target
3.  E:not(selector)
4.  E:focus(鼠标点入之后)

## 2、圆角（border-radius） ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.box{
    				width: 200px;
    				height: 200px;
    				border: 1px solid red;
    				background-color: blue;
    				
    				border-radius: 30px;
    				/* 上面代码等价于 */
    				/* border-top-left-radius:30px;
    				border-top-right-radius:30px;
    				border-bottom-right-radius:30px;
    				border-bottom-left-radius:30px; */
    				/*每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。*/
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box"></div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

## 3、阴影（box-shadow） ##

语法：box-shadow: *h-shadow* *v-shadow* *blur* *spread* *color* inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

*  *h-shadow：*必需。水平阴影的位置。允许负值。
 *  *v-shadow：*必需。垂直阴影的位置。允许负值。
 *  *blur：*可选。模糊距离。
 *  *spread：*可选。阴影的尺寸。
 *  *color：*可选。阴影的颜色。
 *  inset：可选。将外部阴影 (outset) 改为内部阴影。

<!DOCTYPE html>
     <html>
     	<head>
     		<meta charset="utf-8">
     		<title></title>
     		<style type="text/css">
     			.box{
     				width: 200px;
     				height: 200px;
     				border: 1px solid black;
     				background-color: blue;
     				
     				box-shadow: 10px 10px 5px grey;
     				
     			}
     		</style>
     	</head>
     	<body>
     		<div class="box"></div>
     	</body>
     </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1][]

## 4、文字特效（text-shadow） ##

语法：text-shadow: *h-shadow* *v-shadow* *blur* *color*;

*  *h-shadow：*必需。水平阴影的位置。允许负值。
 *  *v-shadow：*必需。垂直阴影的位置。允许负值。
 *  *blur：*可选。模糊的距离。
 *  *color：*可选。阴影的颜色。

<!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>Title</title>
         <style>
             body{
                 background-color:gray;
             }
             h1{
                 font-size:68px;
                 color:white;
                 /*合并写法*/
                 text-shadow:-1px -3px #ff00de,0 0 20px #ff00de;
    			 /*与下面不等价，注意下面只会执行第二行代码的效果，因为覆盖了*/
    			 /* text-shadow:-1px -3px #ff00de;
    			 text-shadow:0 0 20px #ff00de; */
             }
         </style>
     </head>
     <body>
     <h1>imooc</h1>
     </body>
     </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2][]

## 5、旋转（transform） ##

属性定义及使用说明：transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

语法：transform: none|transform-functions;

例如：

*  transform: translate(-30px,-50%);
 *  transform:rotate(7deg);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 3][]

## 6、渐变（gradients） ##

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

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

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

线性渐变语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

*  *direction：*to bottom(从上到下，这是默认值)/to right(从左到右)/to bottom right(从左上角到右下角)/......(其他类似)
 *  *color-stop1：*表示起始颜色
 *  *color-stop2：*表示想要呈现平稳过渡的最终颜色

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.box1{
    				height: 200px;
    				background-image: linear-gradient(#e66465, #9198e5);
    			}
    			.box2{
    				height: 200px;
    				background-image: linear-gradient(to right, red , yellow);
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box1"></div>
    		<div class="box2"></div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221022/786f3f7857754cef93379d2fa2f07304.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1]: /images/20221022/0f41d505e260413c9933f4bf0332fee0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2]: /images/20221022/5b77ef9029b14a5aa5b02217c3f27791.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 3]: /images/20221022/c91adf8cf6b3458fabd7c2d8b34b0628.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 4]: /images/20221022/fd6516f60cbf4fb0b78265ed4c3db06b.png