本文详细介绍了CSS3的新增特性，包括属性选择器、结构伪类选择器（如:nth-child()）、伪元素选择器的应用，如字体图标和清除浮动。此外，还讲解了盒子模型的变化、圆角边框、阴影效果、文本阴影、文本新功能，以及线性渐变和径向渐变的使用。同时，提到了背景的多层设定和尺寸控制，以及CSS3的滤镜和calc函数。内容覆盖了CSS3在移动端和网页设计中的广泛应用。
目标: 能够说出 CSS3 的新增特性有哪些
CSS3新特性
CSS3新特性
一. CSS3 的现状
- 新增的CSS3特性有兼容性问题，ie9+才支持
- 移动端支持优于 PC 端
- 不断改进中
- 应用相对广泛
- 现阶段主要学习：新增选择器和盒子模型以及其他特性
二. CSS3 新增选择器
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
属性选择器（★★）
属性选择器，按照字面意思，都是根据标签中的属性来选择元素
示例代码：
css
/* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */
/* input[value] { color: pink;} */
/* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {color: pink;}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {color: red;}
section[class$=data] {color: blue;}
div.icon1 { color: skyblue;}
/* 类选择器和属性选择器 伪类选择器 权重都是 10 */
html
<!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
<input type="text" value="请输入用户名">
<input type="text">
<!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>
- 属性选择器，按照字面意思，都是根据标签中的属性来选择元素
- 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器
- 属性选择器也可以选择出来自定义的属性
- **注意：**类选择器、属性选择器、伪类选择器，权重为 10。
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素
E:first-child
匹配父元素的第一个子元素E
<style>
ul li:first-child{
background-color: red;
}
</style>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
/* 1. 选择ul里面的第一个孩子 小li */
ul li:first-child {background-color: pink;}
/* 2. 选择ul里面的最后一个孩子 小li */
ul li:last-child {background-color: pink;}
/* 3. 选择ul里面的第2个孩子 小li */
ul li:nth-child(2) {background-color: skyblue;}
ul li:nth-child(6) {background-color: skyblue;}
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
...
E:last-child 则是选择到了最后一个li标签
E:nth-child(n)（★★★）
匹配到父元素的第n个元素
-
匹配到父元素的第2个子元素
ul li:nth-child(2){} -
匹配到父元素的序号为奇数的子元素
ul li:nth-child(odd){}odd 是关键字 奇数的意思（3个字母 ） -
匹配到父元素的序号为偶数的子元素
ul li:nth-child(even){}even（4个字母 ） -
匹配到父元素的前3个子元素
ul li:nth-child(-n+3){}选择器中的 n 是怎么变化的呢？
因为 n是从 0 ，1，2，3… 一直递增
所以 -n+3 就变成了
- n=0 时 -0+3=3
- n=1时 -1+3=2
- n=2时 -2+3=1
- n=3时 -3+3=0
- …
一些常用的公式： 公式不是死的，在这里列举出来让大家能够找寻到这个模式，能够理解代码，这样才能写出满足自己功能需求的代码
常用的结构伪类选择器是： nth-child(n) {...}
/* 1.把所有的偶数 even的孩子选出来 */
ul li:nth-child(even) {background-color: #ccc;}
/* 2.把所有的奇数 odd的孩子选出来 */
ul li:nth-child(odd) {background-color: gray;}
/* 3.nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子*/
/* ol li:nth-child(n) {background-color: pink; } */
/* 4.nth-child(2n)母选择了所有的偶数孩子 等价于 even*/
/* ol li:nth-child(2n) {background-color: pink;}
ol li:nth-child(2n+1) { background-color: skyblue;} */
/* ol li:nth-child(n+3) {background-color: pink;} */
ol li:nth-child(-n+3) {background-color: pink;}
html 写8个ul、8个ol
E:nth-child 与 E:nth-of-type 的区别
这里只讲明 E:nth-child(n) 和 E:nth-of-type(n) 的区别 剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推导即可
<style>
ul li:nth-child(2){
/* 字体变成红色 */
color: red;
}
ul li:nth-of-type(2){
/* 背景变成绿色 */
background-color: green;
}
</style>
<ul>
<li>列表项一</li>
<p>乱来的p标签</p>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
也就是说：
E:nth-child(n)匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
小结
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
- 关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式
- 如果是无序列表，我们肯定用 nth-child 更多
- 类选择器、属性选择器、伪类选择器，权重为 10
伪元素选择器（★★★）
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
示例demo
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* div::before 权重是2 */
div::before {
/* 这个content是必须要写的 */
content: '我';
}
div::after {
content: '小猪佩奇';
}
</style>
<body>
<div>
是
</div>
</body>
注意：
- before 和 after 创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法： element::before {}
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为 1
应用场景一： 字体图标
在实际工作中，字体图标基本上都是用伪元素来实现的，好处在于我们不需要在结构中额外去定义字体图标的标签，通过content属性来设置字体图标的 编码
步骤：
- 结构中定义div盒子
- 在style中先申明字体 @font-face
- 在style中定义after伪元素 div::after{…}
- 在after伪元素中 设置content属性，属性的值就是字体编码
- 在after伪元素中 设置font-family的属性
- 利用定位的方式，让伪元素定位到相应的位置；记住定位口诀：子绝父相
首先考虑在阿里巴巴矢量图标库下载字体
@font-face {font-family: "iconfont";/* Project id 2569975 */
src: url('font/iconfont.woff2?t=1621926295914') format('woff2'),url('font/iconfont.woff?t=1621926295914') format('woff'),url('font/iconfont.ttf?t=1621926295914') format('truetype');}
div { position: relative;width: 200px;height: 35px;border: 1px solid red;}
div::after {position: absolute;top: 10px;right: 10px;font-family: 'iconfont';content: '\e797';color: red;font-size: 18px;}
写一个div
应用场景二： 仿土豆效果
把之前的代码进行了改善
步骤：
- 找到之前写过的仿土豆的结构和样式，拷贝到自己的页面中
- 删除之前的mask遮罩
- 在style中，给大的div盒子（类名叫tudou的），设置 before伪元素
- 这个伪元素充当的是遮罩的角色，所以我们不用设置内容，但是需要设置content属性，属性的值为空字符串
- 给这个遮罩设置宽高，背景颜色，默认是隐藏的
- 当鼠标移入到 div盒子时候，让遮罩显示，利用 hover 来实现
- css
.tudou {position: relative;width: 444px; height: 320px;background-color: pink;margin: 30px auto;}
.tudou img {width: 100%; height: 100%;}
.tudou::before {content: '';/* 隐藏遮罩层 */display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;}
/* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
.tudou:hover::before {/* 而是显示元素 */display: block;}
html
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
应用场景三： 清除浮动 ***
回忆一下清除浮动的方式：
- 额外标签法也称为隔墙法，是 W3C 推荐的做法。
- 父级添加 overflow 属性
- 父级添加after伪元素
- 父级添加双伪元素
额外标签法也称为隔墙法，是 W3C 推荐的做法
注意： 要求这个新的空标签必须是块级元素
后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化
.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
.clearfix:before,.clearfix:after{content:"",dispaly:table;}
.clearfix:after{clear:both;}
三. 盒子模型（★★★）
CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变
可以分成两种情况：
- box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
- box-sizing: border-box 盒子大小为 width
- 创建div、p
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
box-sizing: content-box;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* css3 盒子模型 盒子最终的大小就是 width 200 的大小 */
box-sizing: border-box;
}
如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）
四. 圆角边框
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius 属性用于设置元素的外边框圆角。
语法：
border-radius:length;
- 参数值可以为数值或百分比的形式
- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
- 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
- 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用
五. 盒子阴影
CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
/*
box-shadow:[inset] x y blur [spread] color
参数
inset：投影方式
inset：内投影
不给：外投影
x、y：阴影偏移
blur：模糊半径
spread：扩展阴影半径
先扩展原有形状，再开始画阴影
color*/
.box{width: 200px; height: 200px; background: lightcyan; box-shadow: 10px 10px 10px yellow; margin: 50px;}
.box1{width: 200px; height: 200px; background: lightcyan; box-shadow:inset 10px 10px 10px yellow; margin: 50px;}
.box2{width: 200px; height: 200px; background: lightcyan; box-shadow: 10px 10px 10px 50px yellow; margin: 50px;}
六. 文字阴影
在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。
语法：
text-shadow: h-shadow v-shadow blur color;
/*文字阴影
text-shadow：x y blur color, …
参数
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
*/
.box{font-size:80px; color:blue; text-shadow: 10px 10px 10px yellow;}
.box1{font-size:80px; color:blue; text-shadow:5px 5px 5px pink, 10px 10px 10px yellow;}
.box2{ color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;}
.box3{color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;margin-top: 160px;}
.box4{text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;margin-top:160px; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;}
.box5{margin-top:160px ; font-size:80px; color:blue; -webkit-text-stroke: 3px yellow;}
七. 新增文本功能
7.1 Direction 定义文字排列方式(全兼容)
Rtl 从右向左排列
Ltr 从左向右排列
注意要配合unicode-bidi 一块使用
7.2 Text-overflow 定义省略文本的处理方式
clip 无省略号
Ellipsis 省略号
注意配合overflow:hidden和white-space:nowrap一块使用
/*
Direction 定义文字排列方式(全兼容)
Rtl 从右向左排列
Ltr 从左向右排列
注意要配合unicode-bidi 一块使用
*/
.dir{width: 800px; height: 50px; font-size: 40px; border:1px solid red;
direction: rtl; unicode-bidi: bidi-override;
}
/*
Text-overflow 定义省略文本的处理方式
clip 无省略号
Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)
*/
.ell{width: 800px; height: 50px; font-size: 40px; border:1px solid red;
text-overflow: ellipsis;overflow: hidden; white-space: nowrap;
}
.test{width: 800px; font-size: 40px; border:1px solid red;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow: hidden; }
/*多行文本省略号*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
八. 线性渐变
8.1 线性渐变只能用在背景上
linear-gradient([<起点> || <角度>,]? <点>, <点>…)
8.2 参数
起点：从什么方向开始渐变 默认：top
还可以设置为 ：left、top、left top
角度：从什么角度开始渐变
xxx deg（度数）的形式
点：渐变点的颜色和位置
black 50%，位置可选
8.3 线性渐变实例
加入点的位置
top, red 40%, green 60%
top, red 50%, green 50%
同一个位置两个点——直接跳变
也可以用px
配合rgba
top, rgba(255,255,255,1), rgba(255,255,255,0)
加入背景图片
background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)
css:
/*
-webkit-linear-gradient 线性渐变效果
(方向,点的颜色,点的颜色)
*/
div{width: 200px; height: 100px; border:1px solid #000;margin: 10px;}
div:nth-of-type(1){background: -webkit-linear-gradient(top,red,green);}
div:nth-of-type(2){background: -webkit-linear-gradient(left top,red,green);}
div:nth-of-type(3){background: -webkit-linear-gradient(60deg,red,green);}
div:nth-of-type(4){background: -webkit-repeating-linear-gradient(left,red 0,green 50px);}
div:nth-of-type(5){background: -webkit-linear-gradient(left,red 0,green 50px,blue 100px, yellow 150px, pink 200px);}
div:nth-of-type(6){background: -webkit-linear-gradient(left,red 0,green 25%,blue 50%, yellow 75%, pink 100%);}
div:nth-of-type(7){background: -webkit-linear-gradient(left,red 0,green 50px,blue 50px, yellow 200px);}
div:nth-of-type(8){background: -webkit-linear-gradient(left,red 0,red 50px,blue 50px,
blue 100px,yellow 100px,yellow 150px,pink 150px, pink 200px );}
div:nth-of-type(9){background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)),url(../img/1.jpg) no-repeat ;}
html
1.从上到下，从红到绿
<div></div>
2.规定了起点位置的渐变
<div></div>
<div></div>
3.循环渐变
<div></div>
4.多点渐变
<div></div>
5.渐变点的px值可以写成%
<div></div>
6.跳变 ,在同一个坐标点设置了不同的两个颜色
<div></div>
7.电视节目结束时的彩条效果
<div></div>
8.结合rgba来使用 ,渐变效果和背景图片之间需要添加 ,
<div></div>
九.径向渐变
radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);
起点：可以是关键字（left,top,right,bottom），具体数值或百分比
形状： ellipse、circle
大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
css:
/*
radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);
起点：可以是关键字（left,top,right,bottom），具体数值或百分比
形状： ellipse(椭圆)、circle(正圆)
大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;*/
div{width: 200px; height: 200px; border:1px solid #000; border-radius: 50%;}
div:nth-of-type(1){
background: -webkit-radial-gradient(red,yellow);
}
div:nth-of-type(2){
background: -webkit-radial-gradient(top,red 0,yellow 50%,rgba(0,255,0,1) 200px);
}
div:nth-of-type(3){
background: -webkit-radial-gradient(50px 100px,circle,red 0,yellow 50%,rgba(0,255,0,1) 200px);
/*圆心点的坐标, 形状 , 点的颜色和位置,点的颜色和位置…… */
}
div:nth-of-type(4){
background: -webkit-radial-gradient(50px 100px,100px 20px,red 0,yellow 50%,rgba(0,255,0,1) 200px);
/*圆心点的坐标, 大小 , 点的颜色和位置,点的颜色和位置…… */
}
div:nth-of-type(5){
background: -webkit-radial-gradient(50px 100px,contain,red 0,yellow 50%,rgba(0,255,0,1) 200px);
/*圆心点的坐标, 大小 , 点的颜色和位置,点的颜色和位置…… */
}
html
1.基础渐变效果
<div></div>
2.规定圆心坐标的径向渐变
<div></div>
3.规定形状
<div></div>
4.规定大小
<div></div>
5.设置关键字
<div></div>
十. 背景
10.1 多背景
逗号分开
background: url(a.jpg) 0 0, url(b.jpg) 0 100%;
div{width: 300px; height: 300px; margin: 10px; border:1px solid red;}
div:nth-of-type(1){
background: url(../img/1.jpg) no-repeat,url(../img/2.jpg) no-repeat bottom ;
background-size:100% 50% ,100px 100px ;
}
/*cover : 背景的短边拉伸布满整个父元素，长边等比例缩放*/
div:nth-of-type(2){
background: url(../img/1.jpg) no-repeat;
background-size:cover ;
background-position: -100px 0;
}
/*contain : 背景的长边拉伸布满整个父元素，短边等比例缩放*/
div:nth-of-type(3){
background: url(../img/1.jpg) no-repeat ;
background-size:contain;
}
10.2 背景尺寸
background-size:x y
background-size:100% 100%
Cover 放大
Contain 缩小
其他特性（★）
图标变模糊 – CSS3滤镜filter
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
语法：
filter: 函数(); --> 例如： filter: blur(5px); --> blur模糊处理 数值越大越模糊
计算盒子宽度 – calc 函数
calc() 此CSS函数让你在声明CSS属性值时执行一些计算
语法：
width: calc(100% - 80px);
括号里面可以使用 + - * / 来进行计算
.father {
width: 300px;
height: 200px;
background-color: pink;
}
.son {
/* width: 150px; */
/* width: calc(150px + 30px); */
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
}
扫一扫
1456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
