查询CSS3兼容性的网站
查询CSS3兼容性的网站:https://caniuse.com/
CSS3新增长度单位
rem
根元素字体大小的倍数,只与根元素字体大小有关。vw
视口宽度的百分之多少,10vw
就是视口宽度的10%
。vh
视口高度的百分之多少,10vh
就是视口高度的10%
。vmax
视口宽高中大的那个的百分之多少。(了解即可)vmin
视口宽高中小的那个的百分之多少。(了解即可)
CSS3新增颜色设置方式
CSS3
新增了三种颜色设置方式,分别是:rgba
、hsl
、hsla
。
rgb与rgba
/* 混合出任意一种颜色 */
color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */
/* 也可以使用百分比表示一种颜色(用的少) */
color: rgba(100%, 0%, 0%, 50%);/* 半透明的红色 */
HSL与HSLA
HSL
是通过:色相、饱和度、亮度,来表示一个颜色的,格式为:hsl(色相, 饱和度, 亮度)
- 色相:取值范围是
0~360
度。 - 饱和度:取值范围是
0%~100%
。(向色相对应颜色中添加灰色,0%
全灰,100%
没有灰) - 亮度:取值范围是
0%~100%
。(0%
亮度没了,所以就是黑色。100%
亮度太强,所以就是白色了)
- 色相:取值范围是
HSLA
其实就是在HSL
的基础上,添加了透明度。
CSS3新增选择器、
CSS3
新增的选择器有:动态伪类、目标伪类、语言伪类、UI
伪类、结构伪类、否定伪类、伪元素。(可前往以下帖子查看)
https://editor.csdn.net/md/?articleId=130947422
CSS3新增盒子模型相关属性
box-sizing 怪异盒模型
使用box-sizing
属性可以设置盒模型两种类型
可选值 | 含义 |
---|---|
content-box | width 和 height 设置的是盒子内容区的大小。(默认值) |
border-box | width 和 height 设置的是盒子总大小。(怪异盒模型) |
resize 调整盒子大小
使用resize
属性可以控制是否允许被用户调节元素尺寸。
值 | 含义 |
---|---|
none | 不允许用户调整元素大小。(默认) |
both | 用户可以调节元素的宽度和高度。 |
horizontal | 用户可以调节元素的宽度。 |
vertical | 用户可以调节元素的高度。 |
使用必须与overflow
配合
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
表示没有阴影 - 示例:
/* 写两个值:水平位置 垂直位置 */
box-shadow: 10px 10px;
/* 写三个值:水平位置 垂直位置 阴影颜色 */
box-shadow: 10px 10px blue;
/* 写两个值:水平位置 垂直位置 模糊程度 阴影颜色*/
box-shadow: 10px 10px 10px blue;
/* 写两个值:水平位置 垂直位置 模糊程度 阴影颜色*/
box-shadow: 10px 10px 20px 0px blue;
/* 写两个值:水平位置 垂直位置 模糊程度 阴影颜色 内阴影 */
box-shadow: 10px 10px 20px 0px blue inset;
opacity 不透明度
opacity
属性能为整个元素添加透明效果,值是0
到1
之间的小数,0
是完全透明,1
表示完全不透明。
opacity 与 rgba 的区别?
opacity 是一个属性,设置的是整个元素(包括元素里的内容)的不透明度
rgba 是颜色的设置方式,用于设置颜色,它的透明度,仅仅是调整颜色的透明度。
CSS3新增背景相关属性
background-origin
- 作用:设置背景图的原点。
- 语法
padding-box
:从padding
区域开始显示背景图像。—默认值border-box
:从border
区域开始显示背景图像。content-box
:从content
区域开始显示背景图像。
background-clip
- 作用:设置背景图的向外裁剪的区域。
- 语法
border-box
:从border
区域开始向外裁剪背景。—默认值padding-box
:从padding
区域开始向外裁剪背景。content-box
: 从content
区域开始向外裁剪背景。text
:背景图只呈现在文字上。
注意:若值为text
,那么background-clip
要加上-webkit-
前缀。且文字颜色需设置为透明
background-size
- 作用:设置背景图的尺寸。
- 语法:
- 用长度值指定背景图片大小,不允许负值。
background-size: 300px 200px;
- 用百分比指定背景图片大小,不允许负值。
background-size: 100% 100%;
auto
:背景图片的真实大小。—默认值content
:将背景图片等比例缩放,是背景图片的宽或高,与容器的宽或高相等,再将完整背景图片包含在容器内,但要注意:可能会造成容器部分区域没有背景图片。
background-size: contain;
cover
:将背景图片等比例缩放,直到完全覆盖容器,图片会尽可能全的显示在元素上,但要注意:背景图片可能显示不完整。—相对比较好的选择
background-size: cover;
- 用长度值指定背景图片大小,不允许负值。
background复合属性
-
语法:
background: color url repeat position / size origin clip
-
注意:
orange
和clip
的值如果一样,如果只写一个值,则orgin
和clip
都设置;如果设置了两个值,前面的是origin
,后面的clip
。size
的值必须写在position
值的后面,并且用/
分开
多图背景
CSS3
允许元素设置多个背景图片
/* 添加多个背景图 */
background: url('../images/bg-lt.png') no-repeat left top,
url('../images/bg-lt.png') no-repeat right top,
url('../images/bg-lb.png') no-repeat left bottom,
url('../images/bg-rb.png') no-repeat right bottom
边框圆角
- 在
CSS3
中,使用border-radius
属性可以将盒子变为圆角。 - 同时设置四个圆角:
border-radius: 10px;
- 分开设置每个角的圆角:
属性名 | 作用 |
---|---|
border-top-left-radius | 设置左上角圆角半径:1. 一个值是正圆半径,2. 两个值分别是椭圆的x 半径、y 半径 |
border-top-right-radius | 设置右上角圆角半径:1. 一个值是正圆半径,2. 两个值分别是椭圆的x 半径、y 半径 |
border-bottom-right-radius | 设置右下角圆角半径:1. 一个值是正圆半径,2. 两个值分别是椭圆的x 半径、y 半径 |
border-bottom-left-radius | 设置左下角圆角半径:1. 一个值是正圆半径,2. 两个值分别是椭圆的x 半径、y 半径 |
- 分开设置每个角的圆角,综合写法:
border-radius: 100px 50px 20px 10px / 50px 20px 10px 5px;
边框外轮廓
outline-width
: 外轮廓的宽度。outline-color
: 外轮廓的颜色。outline-style
: 外轮廓的风格。none
: 无轮廓dotted
: 点状轮廓dashed
: 虚线轮廓solid
: 实线轮廓double
: 双线轮廓
outline-offset
设置外轮廓与边框的距离,正负值都可以设置。
注意:outline-offset
不是outline
的子属性,是一个独立的属性outline
复合属性
outline: 50px solid blue;
CSS3新增文本属性
文本阴影
- 在
CSS3
中,我们可以使用text-shadow
属性给文本添加阴影。 - 语法:
text:shadow: h-shadow v-shadow blur color;
值 | 描述 |
---|---|
h-shadow | 必需写,水平阴影的位置,允许负值 |
v-shadow | 必需写,垂直阴影的位置,允许负值 |
blur | 可选,模糊的距离 |
color | 可选,阴影的颜色 |
默认值:text-shadow: none 表示没有阴影。 |
文本换行
- 在
CSS3
中,我们可以使用white-space
属性设置文本换行方式。 - 常用值如下:
值 | 含义 |
---|---|
normal | 文本超出边界自动换行,文本中的换行被浏览器识别为一个空格。(默认值) |
pre | 原样输出,与pre 标签的效果相同 |
pre-wrap | 在pre 效果的基础上,超出元素边界自动换行 |
pre-line | 在pre 效果的基础上,超出元素边界自动换行,且只识别文本中的换行,空格会被忽略(仅忽略文字始末的空格) |
nowrap | 强制不换行 |
文本溢出
- 在
CSS3
中,我们可以使用text-overflow
属性设置文本你内容溢出时的呈现模式。 - 常用值如下:
值 | 含义 |
---|---|
clip | 当内联样式溢出时,将溢出部分裁切掉。(默认值) |
ellipsis | 当内联内容溢出块容器时,将溢出部分替换为… |
注意:要使得text-overflow
属性生效,快容器必须定义overflow
为非visible
值,white-space
为nowrap
值。
文本修饰
CSS3
升级了text-decoration
属性,让其变成了复合属性。text-decoration: text-decoration-line || text-decoration-style || text-decoration-color
- 子属性及其含义:
text-decoration-line
设置文本装饰线的位置none
:指定文字无装饰(默认值)underline
:指定文字的装饰是下划线overline
:指定文字的装饰是上划线line-through
:指定文字的装饰是贯穿线
text-decoration-style
文本装饰线条的形状solid
:实线(默认)double
:双线botted
:点状线条dashed
:虚线wavy
:波浪线
text-decoration-color
文本装饰线条的颜色
文本描边
注意:文字描边功能仅webkit
内核浏览器支持。
-webkit-text-stroke-width
:设置文字描边的宽度,写长度值。-webkit-text-stroke-color
:设置文字描边的颜色,写颜色值。-webkit-text-stroke
:复合属性,设置文字描边宽度和颜色。
CSS3新增渐变
线性渐变
- 多个颜色之间的渐变,默认从上到下渐变。
background-image: linear-gradient(red,yellow,green);
- 使用关键词设置线性渐变的方向。
background-image: linear-gradient(to right,red,yellow,green);
background-image: linear-gradient(to right top,red,yellow,green);
- 使用角度设置线性渐变的方向。
background-image: linear-gradient(20deg,red,yellow,green);
- 调整开始渐变的位置。
background-image: linear-gradient(red 50px,yellow 100px,green 150px);
径向渐变
background-image: 半径 at 圆心位置 颜色1 终点位置, 颜色2 终点位置...;
- 多个颜色之间的渐变, 默认从圆心四散。(注意:不一定是正圆,要看容器本身宽高比)
background-image: radial-gradient(red,yellow,green);
- 使用关键词调整渐变圆的圆心位置。
background-image: radial-gradient(at left,red,yellow,green);
background-image: radial-gradient(at left top,red,yellow,green);
- 使用像素值调整渐变圆的圆心位置。
background-image: radial-gradient(at 100px 50px,red,yellow,green);
- 调整渐变形状为正圆 (两种方法)。
background-image: radial-gradient(circle,red,yellow,green);
background-image: radial-gradient(100px 100px,red,yellow,green);
- 调整开始渐变的位置。
background-image: radial-gradient(red 50px,yellow 100px,green 150px);
重复渐变
无论线性渐变,还是径向渐变,在没有发生渐变的位置,继续进行渐变,就为重复渐变。
- 使用
repeating-linear-gradient
进行重复线性渐变,具体参数同linear-gradient
。 - 使用
repeating-radial-gradient
进行重复线性渐变,具体参数同radial-gradient
。
Web字体
基本用法
可以通过 @font-face
指定字体的具体地址,浏览器会自动下载该字体,这样就不依赖用户电脑上的字体了。
- 语法(简写方式)
@font-face {
font-family: "情书字体";
src: url('./方正手迹.ttf');
}
- 语法(高兼容性写法)
@font-face {
font-family: "atguigu";
font-display: swap;
src: url('webfont.eot'); /* IE9 */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'), /* chrome、firefox */
url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari,Android*/
url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
定制字体
- 中文的字体文件特别大,使用完整的字体不现实,通常针对某几个文字进行单独定制。
- 可使用阿里
Web
字体定制工具:https://www.iconfont.cn/webfont
字体图标
- 相对图片更加清晰。
- 灵活性高,更方便变大小、颜色、风格等。
- 兼容性好,
IE
也能支持。 - 阿里图标官网地址:https://www.iconfont.cn/