CSS3基础

666	666	666	666	666
前缀	-webkit	-moz	-ms	-o
浏览器	chrome和safari	firefox	IE	opera

CSS3基础 -- 边框

• 圆角效果 向元素添加圆角边框

border-radius:10px;//所有角都为10px（还可以使用百分比 兼容性不好）
border-radius:5px 4px 3px 2px;//四个半径值 分别为 左上角 右上角 右下角 左下角

• 阴影 box-shadow 向盒子添加阴影。支持一个或者多个

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

• border-image:url 待定

• background-image:linear-gradient(to top left,red , orange,yellow); 渐变色 颜色无限

1. to top 由下到上
2. to right 由左到右
3. to bottom 由上到下
4. to left 由右到左
5. to top left 右下角到左上角
6. to top right 左下角到右上角

属性选择器

• E[att^="val"] -- a[class^=icon] // 匹配icon开头的
• E[att=pdf] // 匹配pdf结尾的
• E[attr="val"] -- a[class=more] // 匹配包含more的

结构性伪类选择器

• :root 根选择器 （相当于 html { background:range }）
• :not 否定选择器（选择除某个元素之外的所有元素）

div:not([id="footer"]){
  background: orange;
}

• :emply 选择器表示的就是空，用来选择没有任何内容的元素

div:empty{
  border: 1px solid green;
}

• target 迷迷糊糊
• :first-child 选择父元素的第一个子元素的元素E。
• :first-of-type 类似 需要指定类型
• :last-child 选择父元素的最后一个子元素的元素E。
• :last-of-type 类似 需要指定类型

ul > li:first-child {
  color:red;
}

/*我要改变第一个段落的背景为橙色*/
.wrapper > p:first-of-type {
  background: orange;
}

ul > li:last-child {
  border-bottom: none;
}

• :nth-child(n) 选择器用来定位某个元素的一个或多个特定的子元素。 （奇偶数）
• :nth-of-type(n) 同上 指定某种类型子元素
• :nth-last-child(n) 类似 倒序
• :nth-last-of-type(n) 同上 指定某种类型子元素

// 当参数为数值时，从1开始，为表达式时，从0开始。
ol > li:nth-child(2n+1){
  background: green;
}

.wrapper > p:nth-of-type(2n){
  background:orange;
}

// 倒序
ol > li:nth-last-child(2n){
  background: orange;
}

• :only-child 匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
• :only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的

选择器

• :enabled 选择器 可用
• :disabled 选择器 不可用 需要在表单元素的HTML中设置“disabled”属性。

input[type="text"]:enabled {
  border: 1px solid #f36;
  box-shadow: 0 0 5px #f36;
}

• :checked 选中状态
• :read-only选择器 只读模式
• :read-write 选择器 非只读模式

变形

• rotate() 旋转
• skew(x,y) 水平垂直同时扭曲 一个参数即为水平方向
• scale(x,y) 水平垂直同时缩放

• scaleX(x) 水平缩放
• scaleY(y) 垂直缩放

• translate() 位移

translateX()
translateY()

.wrapper span{
  transform:ratate(80deg);
}

.wrapper span{
  transform:skew(80deg,60deg);
}

• transform-origin: top right; 原点变形

布局

• columns 多列布局
• column-width 多列布局