前言:CSS3 是CSS2 的升级版本,它在CSS2 的基础上,新增了很多强大的新功能,从而解决一些实际面临的问题。
✨✨✨这里是秋刀鱼不做梦的BLOG
✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客
先让我们看一下本篇文章的大致内容:
目录
1.CSS3 概述
2.CSS3私有前缀
(1)什么是私有前缀
(2)常见浏览器私有前缀
(3)为什么要有私有前缀
3.CSS3 新增盒模型相关属性
(1)box-sizing 怪异盒模型
(2)resize 调整盒子大小
(3)box-shadow 盒子阴影
(4)opacity 不透明度
1.CSS3 概述
学习完CSS2之后,我们就需要学习CSS3,在前言中我们知道了,CSS3 是CSS2 的升级版本,它在CSS2 的基础上,新增了很多强大的新功能,那么其新增的特性有哪些呢?
CSS3 的新特性如下:
1. 新增了更加实用的选择器,例如:动态伪类选择器、目标伪类选择器、伪元素选择器等等。
2. 新增了更好的视觉效果,例如:圆角、阴影、渐变等。
3. 新增了丰富的背景效果,例如:支持多个背景图片,同时新增了若干个背景相关的属性。
4. 新增了全新的布局方案 —— 弹性盒子。
5. 新增了Web 字体,可以显示用户电脑上没有安装的字体。
6. 增强了颜色,例如: HSL 、HSLA 、RGBA 几种新的颜色模式,新增 opacity 属性来控制透明度。
7. 增加了2D 和3D 变换,例如:旋转、扭曲、缩放、位移等。
8. 增加动画与过渡效果,让效果的变换更具流线性、平滑性。
不过读者无需担心,在之后的学习中,我们将会对其进行一一讲解,这里只需要先进行了解即可!
2.CSS3私有前缀
在学习CSS3新增的功能之前,我们需要先了解一下什么是CSS3私有前缀,它对我们之后的学习有帮助。
(1)什么是私有前缀
如下代码中的-webkit- 就是私有前缀:
div {
width:400px;
height:400px;
-webkit-border-radius: 20px;
}
这里我们设置了div元素的宽度和高度,但是第三个功能我们不太清除是干什么的,但是我们会发现在其功能之前出现了一个-webkit-修饰,这就是CSS3中的私有前缀。
(2)常见浏览器私有前缀
以下举出了常见浏览器私有前缀:(不同浏览器使用的私有前缀不同):
Chrome 浏览器: -webkit-
Safari 浏览器: -webkit-
Firefox 浏览器: -moz-
Edge 浏览器: -webkit-
旧 Opera 浏览器: -o-(已过时)
旧 IE 浏览器: -ms-(已过时)
了解完了有哪些常见浏览器私有前缀和什么是私有前缀之后,细心的读者就会有疑问,私有前缀到底为什么会被设计出来,私有前缀到底有什么用呢?
(3)为什么要有私有前缀
我们要知道:W3C 标准所提出的某个CSS 特性,在被浏览器正式支持之前,浏览器厂商会根据浏览器的内核,使用私有前缀来测试该CSS 特性,在浏览器正式支持该CSS 特性后,就不需要私有前缀了。
所以简而言之,私有前缀就是用来表明该功能还在试用期中,至于之后是否会采用,那么不得而知了。
注意:
我们在编码时,不用过于关注浏览器私有前缀,不用绞尽脑汁的去记忆,也不用每个都去查询,因为常用的CSS3 新特性,主流浏览器都是支持的,即便是为了老浏览器而加前缀,我们也可以借助现代的构建工具,去帮我们添加私有前缀。
查询CSS3新增特性的兼容性的网站:https://caniuse.com/
点开网页输入想要查询的特性名称:
如果可以使用,则为绿色,不能则为红色,对于黄色的就是部分支持(需要使用私有前缀):
这样我们就大致了解了什么是私有前缀了!
3.CSS3 新增盒模型相关属性
为了更好的从CSS2到CSS3进行过渡,本篇文章只讲解一个新增模块的特性(盒模型相关属性),先来看一下有哪些CSS3新增盒模型相关属性(如图):
(1)box-sizing 怪异盒模型
box-sizing属性的作用:用于设置宽高作用的对象。
其常见的属性值为:
属性值 | 含义 |
---|---|
content-box | width 和 height 设置的是盒子内容区的大小。(默认值) |
border-box | width 和 height 设置的是盒子总大小。(怪异盒模型) |
使用更加通俗易懂的话语来说,就是如果将box-sizing设置为content-box,那么你设置的宽高就是盒子内容区的宽高,如果想要计算盒子的总宽高,就需要自己在加上其padding区和border区。
但是如果将box-sizing设置为border-box,那么设置的宽高则为盒子的总的宽高(content+padding+border)
这样我们就了解了box-sizing 怪异盒模型了。
(2)resize 调整盒子大小
resize属性的作用:可以控制是否允许用户调节元素尺寸。
其常见的属性值有:
属性值 | 含义 |
---|---|
none | 不允许用户调整元素大小。 (默认) |
both | 用户可以调节元素的宽度和高度。 |
horizontal | 用户可以调节元素的宽度 。 |
vertical | 用户可以调节元素的高度。 |
我们这里使用属性值vertical进行举例:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div>这是一个可以改变大小的方块</div>
</body>
</html>
CSS代码:
div {
width: 300px;
height: 200px;
background-color: orange;
overflow: hidden;
resize: vertical;
}
注意:如果想要使元素可以改变大小,那么必须加上overflow: hidden;属性。
我们会发现其出现了一个可以拉动的图标,这样这个元素就可以调节其高度了。
这样我们就了解了resize 调整盒子大小了。
(3)box-shadow 盒子阴影
box-shadow属性的作用:为盒子添加阴影。
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
各个值的含义:
属性值 | 含义 |
---|---|
h-shadow | 水平阴影的位置,必须填写,可以为负值 |
v-shadow | 垂直阴影的位置,必须填写,可以为负值 |
blur | 可选,模糊距离 |
spread | 可选,阴影的外延值 |
color | 可选,阴影的颜色 |
inset | 可选,将外部阴影改为内部阴影 |
默认值: box-shadow:none 表示没有阴影。
我们可以看一下阴影的效果:
当然我们也可以写2、3、4、5、6个值:
例如:
/* 写两个值,含义:水平位置、垂直位置 */
box-shadow: 10px 10px;
/* 写三个值,含义:水平位置、垂直位置、颜色 */
box-shadow: 10px 10px red;
/* 写三个值,含义:水平位置、垂直位置、模糊值 */
box-shadow: 10px 10px 10px;
/* 写四个值,含义:水平位置、垂直位置、模糊值、颜色 */
box-shadow: 10px 10px 10px red;
/* 写五个值,含义:水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow: 10px 10px 10px 10px blue;
/* 写六个值,含义:水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow: 10px 10px 20px 3px blue inset;
这里效果就不一一演示了,读者可以将代码复制到编译器中自行运行查看。
这样我们就了解了box-shadow 盒子阴影了。
(4)opacity 不透明度
opacity属性的作用:为整个元素添加透明效果, 值是 0 到 1 之间的小数, 0 是完全透明, 1 表示完全不透明。
我们直接使用一个案例来看一下:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div>盒子整体的不透明度</div>
</body>
</html>
CSS代码:
div {
width: 300px;
height: 200px;
background-color: orange;
font-size: 20px;
opacity: 0.5;
box-shadow: 10px 10px 10px black;
}
我们会发现元素整体的不透明度发生了改变。
注意:opacity 与 rgba 的区别?
opacity 是一个属性,设置的是整个元素(包括元素里的内容)的不透明度。
rgba 是颜色的设置方式,用于设置颜色,它的透明度,仅仅是调整颜色的透明度。
这样我们就了解了opacity 不透明度了。
想要了解更多的CSS知识------------------->CSS_秋刀鱼不做梦的博客-CSDN博客
以上就是本篇文章的全部内容了~~~