# css3基础
## 1、什么是css3?
- 是css技术的升级版本,在css2的基础上,新增了许多特性,弥补了css2的不足,使web页面的开发变得更加高效、便捷
- css3按模块化进行设计,比较重要的css3模块包含、
选择器、框模型、背景和边框、文本效果、2D|3D转换、动画、多列布局、用户界面
- css3优点: CSS3是完全向后兼容,所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。
## 2、浏览器的私有前缀(兼容性前缀)
- 有些css3的属性还只是最新版的预览版,还没有正式发版, 没有形成标准,只是某些浏览器的专属属性 ,就需要加前缀
- 当一个属性或规则成为标准,并被主流浏览器的最新版普遍兼容的时候,可以去掉私有前缀
- 书写顺序:先写私有css属性,然后再写标准css属性
- 为了兼容老旧版本的浏 览器我们要写以下代码:
- 浏览器、内核、私有前缀
| 浏览器 | 内核 | 私有前缀 |
| -------------- | ------- | -------- |
| chrome、safari | webkit | -webkit- |
| Opera | Presto | -o- |
| Firefox | Gecko | -moz- |
| IE | Trident | -ms- |
- Autoprefixer是一款自动管理浏览器前缀的插件,它可以解析CSS文件并且添加浏览器前缀到CSS内容里,使用Can I Use(caniuse网站)的数据来决定哪些前缀是需要的。
- autoprefixer
- 在vscode中安装autoprefixer插件
- 在外部的css文件中书写相关属性和属性值
- 按下F1,选择autoprefixer:Run,之后会在css文件中添加私有前缀
- 注意:若快捷键冲突,点击fn+f1
```css
input::-webkit-input-placeholder {
color: tomato;
}
input::-moz-placeholder {
color: tomato;
}
input:-ms-input-placeholder {
color: tomato;
}
input::-ms-input-placeholder {
color: tomato;
}
input::placeholder {
color: tomato;
}
.box1 {
width: 100px;
height: 100px;
background-color: tomato;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
```