CSS3 基本语法
什么是CSS3
- CSS3 是 CSS2 的升级版本，3 是版本号，它在 CSS2.1 的基础上增加了很多强大的功能。
- CSS3语言开发是朝着模块化发展的 https://www.w3.org/Style/CSS/current-work.html
CSS3 的新特性
- 新的选择器：CSS3 引入了一些新的选择器，如属性选择器、伪类选择器、伪元素选择器等，可以更加精确地选取元素。
- 边框样式：CSS3 引入了多种新的边框样式，如圆角边框、图像边框、阴影边框等。
- 渐变：CSS3 支持线性和径向渐变，可以用来实现更加丰富的背景效果。
- 阴影和反射：CSS3 引入了阴影和反射等新的效果，可以使元素看起来更加立体和真实。
- 过渡和动画：CSS3 支持过渡和动画效果，可以让元素的变化更加平滑和自然。
- 字体：CSS3 支持新的字体格式，如WOFF、EOT、SVG、TTF等。
- 弹性布局：CSS3 引入了 Flexbox 布局和 Grid 布局，可以让网页更加灵活和适应不同尺寸的屏幕。
- 多列布局：CSS3 支持多列布局，可以将文本或内容分成多列显示。
- 2D/3D 转换：CSS3 支持 2D 和 3D 转换，可以使元素在平面或空间内移动、旋转或缩放。
- 响应式设计：CSS3 支持媒体查询，可以根据不同的设备尺寸和屏幕方向，设置不同的样式。
CSS3 浏览器私有前缀
sh
-webkit- chrome浏览器、 Safari浏览器
-moz- Firefox
-ms- IE
-o- OpearnCSS3 新增长度单位
sh
rem 根元素字体大小的倍数 多用于移动端的使用
vw 将视口宽度分成100份，设置占多少份，v代表视口的意思，浏览器的窗口代表视口
vh 将视口高度分成100份，设置占多少份
vmax 将视口宽高中较大的一个分成100份，设置占多少份
vmin 将视口宽高中较小的一个分成100份，设置占多少份CSS3 新增颜色设置方式
① rgba
sh
r red
g green
b blue
a opacity 不透明度，取值0~1之间的小数，值越大越不透明，0表示完全透明，1表示完全不透明② hsl
sh
h 色相 取值0~360
s 饱和度 取值0%~100%
l 亮度 取值0%~100%③ hsla
sh
h 色相 取值0~360
s 饱和度 取值0%~100%
l 亮度 取值0%~100%
a opacity 不透明度，取值0~1之间的小数，值越大越不透明，0表示完全透明，1表示完全不透明CSS 函数
CSS 函数总结
https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc
已学过的
url()
rgb()
rgba()
hsl()
hsla()
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-linear-gradient();未学过的
var()
calc()
max()
min()
pow()
sqrt()
sin()
cos()
tan()
....CSS 中使用变量
css
:root {
/* CSS 中定义变量 , CSS 中的变量也有作用域，只能在本元素或后代元素中使用这些变量*/
--len: 1000px;
--form-red: #e1251b;
--btn-red: #f90;
}
.item {
width: var(--len);
padding: 20px;
background: var(--form-red);
border: 6px dashed var(--btn-red);
}CSS 中进行数学计算
css
.box {
--len: 1000px;
width: calc(400px + 200px); /* 加法：两个加数都必须有单位 */
height: calc(var(--len) - 800px); /* 减法：两个加数都必须有单位 */
padding: calc(400px / 10); /* 除法，第二个除数不能有单位 */
margin-top: calc(10 * 2px); /* 乘法， 其中一个不能有单位 */
width: calc(50% + 100px); /* 两个单位不同 */
background: #ccc;
}