前端CSS3基础1（新增长度单位，盒子模型，背景，边框，文本属性，渐变，字体，2D变换，3D变换）

[CSS3 新增长度单位](#CSS3 新增长度单位)
[CSS3 新增盒子模型相关属性](#CSS3 新增盒子模型相关属性)
[CSS3 新增背景属性](#CSS3 新增背景属性)
[CSS3 新增边框属性](#CSS3 新增边框属性)
- border-radius边框属性
- outline边框外轮廓
[CSS3 新增文本属性](#CSS3 新增文本属性)
[CSS3 新增渐变](#CSS3 新增渐变)
[CSS3 web字体](#CSS3 web字体)
[CSS3 字体图标](#CSS3 字体图标)
[CSS3 2D变换](#CSS3 2D变换)
[CSS3 3D变换](#CSS3 3D变换)

CSS3 新增长度单位

CSS2中常用的有：px,%,em

CSS3中有：rem，vw，vh，vmax，vmin。

rem：根元素字体大小的倍数,与根概素字体大小有关。
vw：视口宽度的百分之少，10vw 就是视口宽度的10%，随着视口大小的变化而变化。（PC端可以用，但是移动端用的比较多）。
vh：视口高度的百分之多少，10vh就是视口高度的10%，随着视口大小的变化而变化。
vmax：视口宽高中大的那个的百分之多少。（了解即可），随着视口大小的变化而变化。
vmin：视口宽高中小的那个的分之多少。( 了解即可)，随着视口大小的变化而变化。

CSS3 新增盒子模型相关属性

盒子模型：CSS盒子模型是一种用于设计和布局网页元素的基本概念。每个HTML元素被看作一个矩形的盒子，这个盒子由内部的内容（height和width设置的是内容区的宽和高）、内边距（padding）、边框（border）和外边距（margin）四个部分组成。盒子的总高需要加上padding上下和border的上下。盒子的总高需要加上padding左右和border的左右。

box-sizing怪异盒模型

使用box-sizing属性可以设置盒子模型的两种类型

可选值	含义
content-box	width和height设置的是盒子内容区的大小。（默认值）
border-box	width和height设置的是盒子总大小。（默认值）
resize调整盒子大小
使用resize属性可以控制是否允许用户调节元素尺寸
值	含义
--	--
none	不允许用户调整元素大小。（默认）
both	用户可以调节元素的宽度和高度
horizontal	用户可以调节元素的宽度
vertical	用户可以调节元素的高度

box-shadow盒子阴影

使用box-shadow属性为盒子添加阴影

语法：

css 复制代码

box-shadow：h-shadow v-shadow blur spread color inset；

各个值的含义

值	含义
h-shadow	水平阴影的位置，必须填写，可以为负值
v-shadow	垂直阴影的位置，必须填写，可以为负值
blur	可选，模糊距离
spread	可选，阴影的外延值
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影

默认值：box-shadow：none表示没有阴影

用法示例：（注意写的时候属性值的顺序按照以上表格的顺序。

css 复制代码

.box {
    box-shadow: 5px 5px 10px #888888;
}

在上述示例中，.box类的元素将会显示一个向右下方偏移5px的阴影，模糊半径为10px，颜色为灰色(#888888)。

css 复制代码

.box {
    box-shadow: 10px 10px ;
}

.box类的元素将会显示一个水平位置，垂直位置偏移10px的阴影。

高级用法：

css 复制代码

.box {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(0, 0, 0, 0.3) inset;
}

上面示例中，.box类的元素同时应用了两个阴影效果：一个外部阴影和一个内部阴影。第一个阴影是一个外部阴影，带有模糊效果，颜色为半透明的黑色；第二个阴影是一个内部阴影，无模糊效果，颜色为半透明的黑色。

css 复制代码

/*写六个值含义：水平位置，垂直位置，模糊程度，外延值，阴影部分颜色，内阴影*/
box-shadow:10px 10px 20px 10px blue inset;

opacity不透明度

opacity用于控制元素的不透明度级别，允许开发者调整元素的透明度。该属性接受一个值，范围从0（完全透明）到1（完全不透明）。

语法：

css 复制代码

opacity: value;

value：取值范围为0到1之间，表示元素的不透明度级别。0代表完全透明，1代表完全不透明。

示例：

css 复制代码

.box {
    opacity: 0.5;
}

在上述示例中，.box类的元素将被设置为50%的不透明度，即半透明状态。这意味着背景、内容等元素会透过这个元素显示出来，看起来有一种半透明的效果。

注意事项：

使用opacity属性会影响元素及其内部内容的透明度，而且它会继承给子元素。

不透明度并不仅仅限于元素的可见性。即使元素是不可见的（例如display: none;），opacity属性依然会生效。

透明度不会改变元素的盒子模型（边框、内外边距等），只会影响元素内容的透明度。

opacity属性通常用于创建半透明的背景、悬浮效果，或者用于优化网页设计中的视觉层次和样式。

CSS3 新增背景属性

background-origin背景属性

background-origin属性用于指定背景图片的定位区域，即指定背景图片相对于元素框盒的起始位置。该属性可以帮助控制背景图片在元素内的显示方式。

语法：

css 复制代码

background-origin: padding-box | border-box | content-box;

padding-box：背景图片从内边距区域开始显示。（默认值）

border-box：背景图片从边框区域开始显示。

content-box：背景图片从内容区域开始显示。

示例：

css 复制代码

.box {
    background-image: url('example.jpg');
    background-origin: padding-box;
}

在上面的示例中，.box类的元素将使用名为example.jpg的背景图片，并且该背景图片会从内边距区域开始显示。

注意事项：

background-origin属性通常与background-clip属性结合使用，以更好地控制背景图片的显示效果。

当元素的背景图片与边框、内边距等发生重叠时，可以通过设置不同的background-origin值来调整背景图片的显示位置。

background-clip背景属性

background-clip用于定义背景图片或颜色的绘制区域。通过指定background-clip的值，可以控制背景的绘制范围以及如何裁剪溢出的部分。

语法：

css 复制代码

background-clip: border-box | padding-box | content-box;

border-box：背景在边框盒内绘制。超出边框的背景图不呈现。(默认值）

padding-box：背景在内边距框框内绘制。超出内边距的背景图不呈现。

content-box：背景在内容框框内绘制。超出内容框的背景图不呈现。

text：超出文字的背景图不呈现，背景图只呈现在文字上。

示例：

css 复制代码

.element {
    background: url('example.jpg') no-repeat;
    background-clip: padding-box;
}

在上述示例中，.element类的元素使用名为example.jpg的背景图片，并且指定背景图片在内边距框框内绘制。

注意事项：

使用background-clip属性可以控制背景图片或颜色的绘制区域，以适应设计需求。

结合background-origin和background-clip属性，可以更精确地控制背景图片的显示位置和绘制范围。

这个属性通常用于解决背景图片与元素边界之间的关系，以确保背景的正确显示。

background-size背景属性

background复合属性

css 复制代码

/*background：背景颜色 背景链接url 是否重复 位置/大小 原点 裁剪方式 ；*/
background:blue url(../资料/图片/bg01.jpg) no-repeat 10px 10px/500px 500px border-box;

多背景图

允许元素设置多个背景图

css 复制代码

.box2
{
    width:400px;
    height: 400px;
    background-color:blue;
    font-size: 40px;
    font-weight: bold;
    border: 1px solid black;
    background: url(../资料/图片/bg-lt.png) no-repeat left top,
    url(../资料/图片/bg-rt.png) no-repeat right top,
    url(../资料/图片/bg-lb.png) no-repeat left bottom,
    url(../资料/图片/bg-rb.png) no-repeat right bottom;
}

CSS3 新增边框属性

border-radius边框属性

outline边框外轮廓

CSS3 新增文本属性

文本阴影（错位）

css 复制代码

h1{
    font-size: 40px;
    text-align: center;
    color:black;
    text-shadow:0px 0px 20px red;
}

文本换行

文本溢出

css 复制代码

li{
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}

文本修饰

文本描边

CSS3 新增渐变

线性渐变

调整渐变的角度为中心线以中心点旋转XX度

css 复制代码

background- image: linear-gradient(red 50px, yellow 100px， green 150px) ;

以上代码为：

0-50px 纯红

50px-100px变黄

100px-150px变绿

150px到其他为纯绿

径向渐变

重复渐变

CSS3 web字体

CSS3 字体图标

CSS3 2D变换

2D位移

2D缩放

2D旋转

绕Z轴旋转

2D扭曲

2D多重变换

2D变换原点

CSS3 3D变换

3D空间和景深

x，y，z轴，在Z轴上做出改变就是向我们移动而来，或者向我们远去。

3D透视点位置

3D位移

3D旋转

3D缩放

多重变换

背部

救命啊。知识点好多，记不住啊。。。。。