CSS3私有前缀+新增盒模型相关属性（如果想知道CSS3私有前缀、新增盒模型相关属性的知识点，那么只看这一篇就足够了！）

秋刀鱼不做梦

已于 2024-05-18 14:52:43 修改

阅读量1k

点赞数 122

分类专栏： CSS 文章标签： css3 前端学习 css visual studio code

于 2024-05-13 14:16:55 首次发布

本文链接：https://blog.csdn.net/2302_80198073/article/details/138798974

版权

CSS 专栏收录该内容

14 篇文章 6 订阅

订阅专栏

前言：CSS3 是CSS2 的升级版本，它在CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。

✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

先让我们看一下本篇文章的大致内容：

1.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博客

以上就是本篇文章的全部内容了~~~

秋刀鱼不做梦

关注

122
点赞
踩
89

收藏

觉得还不错? 一键收藏
77
评论
CSS3私有前缀+新增盒模型相关属性（如果想知道CSS3私有前缀、新增盒模型相关属性的知识点，那么只看这一篇就足够了！）

CSS3私有前缀+新增盒模型相关属性（如果想知道CSS3私有前缀、新增盒模型相关属性的知识点，那么只看这一篇就足够了！）
复制链接

扫一扫