简单学习 CSS3 新特性

1 边框

新边框属性

属性	说明
border-radius	用于设置元素的外边框圆角
box-shadow	用于在元素的框架上添加阴影效果
border-image	用于在元素的边框上绘制图

---

1.1 圆角

border-radius 属性是一个简写属性，是将这四个属性border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius简写为一个属性。

语法：

border-radius: [左上角] [右上角] [右下角] [左下角];

/* 示例一：一个值：设置四个角的圆角都为 20px； */
border-radius: 20px;

/* 示例二：二个值：设置左上角和右下角为 10px；右上角和左下角为 30px； */
border-radius: 10px 30px;

/* 示例三：三个值：设置左上角为 10px；右上角和左下角为 20px；右下角为 30px； */
border-radius: 10px 20px 30px;

/* 示例四：四个值：设置左上角为 10px；右上角为 20px；右下角为 30px；左下角为 40px； */
border-radius: 10px 20px 30px;

/* 
注意：
1. 按顺时针为各个角赋值。 
2. 当某个角缺少值时，它就会和对角的值相等。比如示例二和三。
*/

---

1.2 阴影

语法：

box-shadow: [X轴偏移量] [Y轴偏移量] [模糊半径] [扩散半径] [颜色];

/* 示例：x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 10px 10px 9px 4px pink;

---

1.3 边框图像

好文章推荐_1
好文章推荐_2

---

2 渐变(Gradients)

渐变可以在两个或多个指定的颜色之间平稳的过渡。

---

2.1 线性渐变

语法：

background: linear-gradient(方向, 颜色1, 颜色2, ...);

在线性渐变中方向有两种类型：

• 使用预定义方向
  • to top：从下到上
  • to right：从左到右
  • to bottom：从上到下
  • to left：从右到左
  • to bottom right：对角线
  • ...
• 使用角度
  • 0deg
  • 90deg
  • ...

图片来自：点击跳转

/* 示例一：方向从左到右 */
background: linear-gradient(to right, yellow, red);

/* 示例二：角度 180deg */
background: linear-gradient(180deg, yellow, red);

/* 示例三：多种颜色且均匀分布 */
background: linear-gradient(to right, yellow, red, blue);

/* 示例四：多种颜色，但不均匀分布 */
background: linear-gradient(to right, #f90303 10%, #3cb3bd 85%, #edda0c 90%);

/* 示例五：使用透明度 */
/* CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。 */
/* 为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

---

2.2 径向渐变

语法：

background: radial-gradient(center, shape size, start-color, ... , last-color);

center为渐变中心（默认为盒子两条对角线相交点）

shape为形状，有以下2种：

• ellipse：椭圆形（默认）
• circle：圆形

size为大小（即渐变到哪里停止），有以下4种：

• closest-side：最近边
• farthest-side：最远边
• closest-corner：最近角
• farthest-corner：最远角

closest-side：最近边示意图如下（假设o为渐变中心）：

farthest-side：最远边示意图如下：

closest-corner：最近角示意图如下：

farthest-corner：最远角示意图如下：

/*示例一：形状为椭圆形，颜色节点分部均匀（默认情况下）*/
background: radial-gradient(orange, blue, red);

/*示例二：形状为圆形，颜色节点分部均匀*/
background: radial-gradient(circle, orange, blue, red);

/*示例三：形状为圆形，颜色节点分部不均匀*/
background: radial-gradient(circle, orange 10%, blue 30%, red 90%);

/*示例四：形状为圆形，圆心为（60%，60%），渐变到最近边停止*/
background: -webkit-radial-gradient(60% 60%, circle closest-side,orange,blue,red);  /* Safari */
background: -o-radial-gradient(60% 60%, circle closest-side,orange,blue,red);  /* Opera */
background: -moz-radial-gradient(60% 60%, circle closest-side,orange,blue,red);  /* Firefox */
background: radial-gradient(60% 60%, circle closest-side,orange,blue,red);  /* 标准语法 */

/*示例五：形状为圆形，圆心为（40%，40%），渐变到最近边停止*/
background: -webkit-radial-gradient(40% 40%, circle closest-side,orange,blue,red);

---

3 过渡 transition

过渡属性transition允许元素从一种状态逐渐变化到另一种状态。

它是一个简写属性，包含了以下属性：

属性	说明
transition-property	需要过渡的属性名称
transition-duration	定义过渡所花费的时间，默认为 0 秒
transition-timing-function	定义过渡效果的时间曲线，默认是ease
transition-delay	定义过渡效果何时开始，默认是 0 秒（即立刻开始）

/* 示例一：宽度逐渐变宽，花费时间为2秒 */
.box {
	width: 100px;
	height: 100px;
	background: orange;
	transition: width 2s;
}

.box:hover {
	width: 200px;
}

/* 示例二：宽度和高度的大小都逐渐增加，宽度花费时间为2秒，高度花费时间为3秒 */
.box {
	width: 100px;
	height: 100px;
	background: orange;
	transition: width 2s, height 3s;
}

.box:hover {
	width: 200px;
	height: 400px;
}

/* 示例三：设置所有过渡属性：延时1s再开始过渡行为，过渡时间为2s */
.box {
	width: 100px;
	height: 100px;
	background: orange;
	transition: height 2s linear 1s;
}

.box:hover {
	height: 400px;
}

---

4 动画 animation

在 CSS3 中，可以通过animation创建动画。

它是一个简写属性，包含了以下属性：

属性	说明
animation-name	动画名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认为 0 秒
animation-timing-function	定义动画的速度曲线，默认是ease
animation-delay	定义动画何时开始，默认是 0 秒（即立刻开始）
animation-iteration-count	定义动画播放次数，默认是 1 秒
animation-direction	规定动画是否在下一周期逆向播放。默认是normal
animation-play-state	规定动画是否正在运行或暂停。默认是running

/* 示例一 */
.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: dh 3s;
}

@keyframes dh {
  0% {
    background: red;
  }
  50% {
    background: blue;
    margin: 100px 0 0 100px;
  }
  100% {
    background: green;
  }
}

5 转换 transform

通过transform可以移动、旋转、缩放元素。

---

5.1 移动：translate(x, y)

.box {
	width: 100px;
	height: 100px;
	background: pink;
	transform: translate(50px, 100px);  /* 向右移动50px；向下移动100px； */
}

/*
单独在x轴移动：translateX(n);
单独在y轴移动：translateY(n);
*/

---

5.2 旋转：rotate(angle)

.box {
	width: 100px;
	height: 100px;
	background: pink;
	transform: rotate(45deg);  /* 顺时针旋转45度 */
}

---

5.3 缩放：scale(x, y)

.box {
	width: 100px;
	height: 100px;
	background: pink;
	transform: scale(2, 0.5);  /* x轴方向上（宽）增大2倍，y轴方向（高度）缩小0.5倍 */
}

/*
单独缩放x轴方向：scaleX(n);
单独缩放y轴方向：scaleY(n);
*/