CSS3边框与CSS3动画

边框

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序

圆角

在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。

在 CSS3 中，很容易创建圆角。

在 CSS3 中 border-radius 属性被用于创建圆角

基本语法

div.radius {
    border: 2px solid red;
    border-radius: 25px;
}

 盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影

基本语法

div.shadow {
    border: 1px solid gray;
	box-shadow: 10px 10px 5px #888888;
}

边界图片 

有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框。

基本语法

div.round {
	border: 15px solid transparent;
	border-image: url('img/border.png') 30 30 round;
	-webkit-border-image: url('img/border.png') 30 30 round;
	-o-border-image: url('img/border.png') 30 30 round;
}

div.stretch {
	border: 15px solid transparent;
	border-image: url('img/border.png') 30 30 stretch;
	-webkit-border-image: url('img/border.png') 30 30 stretch;
	-o-border-image: url('img/border.png') 30 30 stretch;
}

border-radius 属性

 使用 CSS3 border-radius 属性，你可以给任何元素制作“圆角”。

基本语法

div {
	width: 200px;
	height: 150px;
	padding: 20px;
}
.radius1 {
	color: white;
	background: green;
	border-radius: 25px;
}
.radius2 {
	border-radius: 25px;
	border: 2px solid green;
}
.radius3 {
	border-radius: 25px;
	background: url('img/paper.gif');
	background-position: left top;
	background-repeat: repeat;
}

 指定每个圆角

CSS 拥有用于为元素的每个角指定圆角的属性：

border-radius: 15px 50px 30px 5px;：左上角为15px，右上角为50px，右下角为30px，左下角为5px。

border-radius: 15px 50px 30px;：左上角为15px，右上角和左下角为50px，右下角为30px。

border-radius: 15px 50px;：左上角和右下角为15px，右上角和左下角为50px。

border-radius: 15px;：四个角都是15px。

基本语法

.radius4 {
	color: white;
	background: green;
	border-radius: 15px 50px 30px 5px;
}
.radius5 {
	color: white;
	background: green;
	border-radius: 15px 50px 30px;
}
.radius6 {
	color: white;
	background: green;
	border-radius: 15px 50px;
}
.radius7 {
	color: white;
	background: green;
	border-radius: 15px;
}

圆形边角

 我们经常需要使用圆角来显示用户头像：

基本语法

.avatar {
	width: 200px;
	height: 200px;
	display: inline-block;
	border-radius: 50%;
	background: url('img/avatar.jpg');
	background-size: contain;
}

CSS动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

@keyframes 规则

如果你在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

代码如下

/* 动画代码 */
@keyframes example1 {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
/* 应用动画的元素 */
.example1 {
	animation-name: example1;
	animation-duration: 4s;
}

在上面的例子中，通过使用关键字“from”和“to”（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。

你也可以使用百分比值。通过使用百分比，你可以根据需要添加任意多个样式更改。

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改 <div> 元素的背景颜色：

代码如下

/* 动画代码 */
@keyframes example2 {
	0% {
		background-color: red;
	}
	25% {
		background-color: yellow;
	}
	50% {
		background-color: blue;
	}
	100% {
		background-color: green;
	}
}
/* 应用动画的元素 */
.example2 {
	animation-name: example2;
	animation-duration: 4s;
}