相比于css2和css1多了一些样式
css3几乎不兼容IE低版本
选择器 基本选择器 * 标签 class id 关系型选择器 选择器 选择器 选择器>选择器
新增
选择器1~选择器2 选择器1以后所有同一层选择器2的标签
选择器1+选择器2 选择器1以后下一个同一层选择器2的标签
属性选择器
[属性名]
[属性名=属性值]
新增
[属性名^=属性值] 开头包含
[属性名$=属性值] 结尾包含
[属性名*=属性值] 只要包含
伪类选择器
:active
:visited
:hover
:link
新增
:last-child{} 最后一个子元素
:first-child{} 第一个子元素
:nth-child(n){} n从1开始 跟顺序位置有关
2n 偶数
2n-1
2n+1 奇数
:nth-of-type(){} 跟标签类型有关
:only-child{} 只有一个子级
:only-of-type{} 只有一个想要的标签子级
:checked 选中的
:disable 不可用
:enable 可用的
:not(选择器) 除了谁 都选中
::selection 用户选中
::first-letter 第一个字
::first-line 第一行
::placeholder 提示文字的样式
【border】 border-width border-style border-color
新增
border-radius 圆角
px
%
50% 圆
10px 四个方向
10px 20px 上下 左右
10px 20px 30px
10px 20px 30px 40px 顺时针 左上角开始
10px 20px 30px 40px/10px 20px 30px 40px
分别改变那个边
box-shadow 盒子阴影
x轴偏移量 y轴的偏移量 阴影的模糊半径(模糊) 阴影的扩展面积 阴影的颜色 投影方式
投影方式 默认 外投影
inset 内阴影
叠加使用 一般在项目中很少用，很费性能
【背景】 background-color background-image background-position background-repeat
css3
background-size
具体的值 x轴 y轴 如果单个写就是x轴 px %
contain 看看宽或者高哪个长，以长的为主占满屏幕
cover 看看宽或者高哪个短，以长的为主占满屏幕
下面的就是为了面试，扩展
background-clip: 剪切背景
content-box;
padding-box;
border-box
background-origin 内容起始的位置
content-box;
padding-box;
border-box
多背景
background: url(1.jpg) no-repeat,url(2.jpg) no-repeat 0 300px,url("3.jpg") no-repeat;
位置
1、单位
2、单词 right left top bottom center
【透明度】 opacity 0-1范围 0透明
css3透明方式
rgba()
opacity和 rgba()区别
opacity内容也会变成透明
rgba不会
【文本样式】 text-align text-indent text-decoration line-height
css3
text-shadow 文字阴影
x轴偏移量 y轴偏移量 模糊度 颜色，........
text-transform:
capitalize 首字母大写
uppercase 大写
lowercase 小写
text-overflow
【字体图标】 css3 自定义字体
