CSS3新特性

发表于 | 分类于 |

CSS3新特性

1.CSS3选择器

属性选择器：

  • E[attr] 只要有属性名
  • E[attr=value] 属性名=属性值
  • E[attr~=blue] 包含这个blue整个单词就可以
  • E[attr^=c] 以这个字母c开头的
  • E[attr$=b] 以这个字母b结尾的
  • E[attr*=a] 只要包含a这个字母就行
  • E[attr|=z] 只要以字母z-开头的或者就是字母z的

结构性伪类选择器：

  • E:nth-child(n) 第n个子节点
  • div:nth-child(odd) 奇数行
  • div:nth-child(even) 偶数行
  • div:nth-child(2n) 2的倍数
  • E:nth-last-child(n) 倒数第n个

其他：

  • E:empty 空元素
  • E:first-child 第一个子节点、和 E:nth-child(1)等价
  • E:last-child 倒数第一个、和 E:nth-last-child(1)等价
    • 注意不能有其他兄弟节点
  • E:target 锚点元素的样式
  • div:target{width:100px;}
  • 只要锚点有#div1那上面的target样式就会生效
  • E:disabled 表单元素设置disabled
  • E:enabled 可点击的表单元素
  • E:checked 表示已经选中的checkbox或者radio
  • 文本新增伪类：
  • E:first-line 第一行
  • E:first-letter 第一个字
  • E::selection 选中文本的时候
  • E::before E标签前面添加东西,需要配合content来用
  • E::after E标签后面添加东西
  • E:before E:after单引号也能用
  • E:not(s) 不包括s
  • h1:not(.red) 排除有class为red的h1元素
  • E~F E后面的F兄弟节点

    2.CSS3 边框（Borders）

    用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序
  • border-image 设置所有边框图像的速记属性。
  • border-radius 一个用于设置所有四个边框- *-半径属性的速记属性
  • box-shadow 附加一个或多个下拉框的阴影

3.CSS3 背景

  • background-clip 规定背景的绘制区域。
  • background-origin 规定背景图片的定位区域。
  • background-size 规定背景图片的尺寸

4.CSS3 渐变

CSS3 定义了两种类型的渐变（gradients）：

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
1
background: linear-gradient(direction, color-stop1, color-stop2,...);
  • 径向渐变（Radial Gradients）- 由它们的中心定义
1
background: radial-gradient(center, shape size, start-color,...,last-color);

5.CSS3 文本效果

  • text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
  • text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
  • text-outline 规定文本的轮廓。
  • text-overflow 规定当文本溢出包含元素时发生的事情。
  • text-shadow 向文本添加阴影。
  • text-wrap 规定文本的换行规则。

6.CSS3 转换和变形

旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

7.CSS3 盒模型

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：

  • resize：none | both | horizontal | vertical | inherit resize属性指定一个元素是否应该由用户去调整大小。
  • box-sizing: content-box | border-box | inherit box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容
  • outline:outline-color outline-style outline-width outine-offset
    outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

8.CSS3 弹性盒flexbox

  • display 指定 HTML 元素盒子类型。
  • flex-direction 指定了弹性容器中子元素的排列方式
  • justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式
  • align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
  • flex-wrap 设置弹性盒子的子元素超出父容器时是否换行
  • align-content 修改 flex-wrap 属性的行为，类似 align-items,但不是设置子元素对齐，而是设置行对齐
  • flex-flow flex-direction 和 flex-wrap 的简写
  • order 设置弹性盒子的子元素排列顺序
  • align-self 在弹性子元素上使用。覆盖容器的 align-items 属性
  • flex 设置弹性盒子的子元素如何分配空间

9.多媒体查询

  1. 使用媒体类型
1
2
<linkrel="stylesheet"type="text/css"href="site.css"media="screen"/>
<linkrel="stylesheet"type="text/css"href="print.css"media="print"/>
  1. 媒体查询规则
1
@media all and(min-width:800px){...}

@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。
(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。

  1. and 条件
1
@media(min-width:800px)and(max-width:1200px)and(orientation:portrait){...}
  1. or 关键词
1
@media(min-width:800px)or(orientation:portrait){...}
  1. 使用 not
1
@media(not min-width:800px){...}