LinHuijuan's Blog

CSS3 新特性

# CSS3 新特性

参考链接：[CSS3新属性及兼容代码一览 (opens new window)](http://caibaojian.com/css3-properties.html)

[TOC]

# 一、布局

# 1.1 flexbox

# 1.2 @meida媒体查询

可以针对不同的媒体类型定义不同的样式。

  • link元素中的CSS媒体查询
<!-- 当页面区域的宽度小于600px时，则使用对应的样式 -->
<!--  -->
<link rel="stylesheet" media="(max-width: 600px)" href="example.css" />
1
2
3
  • 样式表中的CSS媒体查询
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
1
2
3
4
5

# 1.3 grid布局

# 1.4 多列布局

# 二、静态样式

# 2.1 边框

# 2.1.1 border-radius

创建圆角。

# 2.1.2 border-image

给边框添加图片。

# 2.1.3 box-shadow

添加阴影。

# 2.2 背景

# 2.2.1 background-size

指定背景图片的大小。

  • 相对于父元素的宽度和高度的百分比大小
background-size: 100% 100%;
background-size: 200px 100px;
1
2
  • auto：默认，以背景区域的比例缩放背景图片。
background-size: auto auto;
1
  • cover：缩放背景图片以完全覆盖背景区域，可能背景图片部分看不见。
background-size: cover;
1
  • contain：缩放背景图片以完全装入背景区，可能背景区部分空白。
background-size: contain;
1

# 2.2.2 background-origin

指定背景图像的位置区域。

指图片从坐标系的那个位置展开，用来决定background-position计算的参考位置

/* 默认padding-box，图片从内边距开始展开 */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
1
2
3
4

# 2.2.3 background-clip

从指定的位置开始绘制。

指图片显示的区域，未指定的区域将被剪掉看不到。

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
/* 默认属性，等同于border-box */
background-clip: no-clip;
1
2
3
4
5
  • background属性可以按任意顺序放置。若两者在background简写里出现一次，则是同时设定background-origin和background-clip；若两次，则前者为background-origin，后者为background-clip。

# 2.3 渐变

# 2.3.1 linear-gradient线性渐变

  • 语法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
1
  • 从上到下的线性渐变
background: linear-gradient(red, blue);
1
  • 从左到右的线性渐变
/* 标准的语法,非标准不用加to */
background: linear-gradient(to right, red, blue);
1
2
  • 从左上角到右下角的线性渐变
/* 标准的语法,非标准不用加to */
background: linear-gradient(to bottom right, red, blue);
1
2

# 2.3.2 radial-gradient径向渐变

  • 语法
background: radial-gradient(center, shape size, start-color, ..., last-color);
1
  • 颜色结点不均匀分布
background: radial-gradient(red 5%, green 15%, blue 60%);
1
  • 形状为圆形且均匀分布的径向渐变
/* 默认值：ellipse(椭圆形) */
background: radial-gradient(circle, red, yellow, green);
1
2

# 2.4 文本效果

# 2.4.1 text-overflow

text-overflow: ellipsis;	/* 超出部分省略号显示 */
1

# 2.4.2 text-shadow

text-shadow: 0 0 10px #f00;	/* 水平阴影，垂直阴影，模糊的距离，阴影的颜色 */
1

# 2.4.3 @font-face

@font-face {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
        url('Sansation_Light.eot');
}
1
2
3
4
5

# 2.5 滤镜

CSSfilter滤镜任意色值转换 (opens new window)

# 三、动态样式

# 3.1 transition过渡

transition： CSS属性，花费时间，效果曲线(默认ease-逐渐变慢)，延迟时间(默认0)

/*所有属性从原始值到指定值的一个过渡，运动曲线ease,运动时间0.5秒*/
transition：all,.5s
1
2
3
4

# 3.2 transform

  • 指定元素中心的位置
transform-origin: 50% 50%;
1
  • 从左边元素移动50个像素，并从顶部移动100像素
transform: translate(50px, 100px);
1
  • 顺时针旋转30度
transform: rotate(30deg);
1
  • 转变宽度为原来的大小的2倍，和其原始大小3倍的高度
transform: scale(2,3);
1

# 3.3 animation

  • 语法
animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）
1
  • 结合@keyframes使用
@keyframes 动画名称 {
    0% { 属性：值；}
    x% { ... }
    ...
    100% { ... }
}
1
2
3
4
5
6

# 四、盒模型

# 五、其他

# 5.1 calc的注意事项

.class {
  height: calc(100% - 50px);
}
1
2
3

less会将它当表达式处理掉，导致浏览器变成了calc(50%)。

/* 最佳写法 */
.class {
  height: calc(~"100% - 50px");
}
1
2
3
4

一些效果实现