CSS3 边框
边框属性
border-radius
box-shadow
border-image
圆角边框
eg:
border-radius 属性用于创建圆角：
向 div 元素添加圆角：
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px;
}
border-image 属性允许您规定用于边框的图片！
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round;
-o-border-image:url(border.png) 30 30 round;
}
background-size 属性规定背景图片的尺寸
div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px;
background-size:63px 100px;
background-repeat:no-repeat;
}
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
background-origin:content-box;
在 CSS3 中，text-shadow 可向文本应用阴影。
能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
eg:
p {word-wrap:break-word;}
2D 转换
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）
和 top（y 坐标） 位置参数
eg:
transform: translate(50px,100px);
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，
元素将逆时针旋转
transform: rotate(30deg);
值 rotate(30deg) 把元素顺时针旋转 30 度。
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）
和高度（Y 轴）参数：
transform: scale(2,4);
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
CSS3 过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片过渡效果示例</title>
<style>
div{
width: 1024px;
height: 1024px;
background: url("42-29407750.jpg");
transition: width 5s, height 5s;
background-size: cover;
}
div:hover{
width: 2048px;
height: 2048px;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，
当元素从一种样式变换为另一种样式时为元素添加效果。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
div
{
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}
注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
.dong{
width: 200px;
height: 200px;
border: 1px solid gray;
margin: 0 auto;
animation: dong 5s;
border-bottom: 2px solid salmon;
}
@keyframes dong
{
0%{
background: red;
}
25%{
background: yellow;
}
50%{
background: blue;
}
100%{
background: green;
}}
.donghua2{
width: 400px;
height: 400px;
border: 2px solid gray;
animation: donghua2 5s;
font-size: 50px; color: aqua;
text-align: center;
/*text-decoration: underline;*/
line-height: 7em;
}
@keyframes donghua2 {
0%{
background: greenyellow;
}
20%{
background: wheat;
}
30%{
background: salmon;
}
50%{
background: aqua;
}
70%{
background: midnightblue;
}
100%{
background: lightslategrey;
}
}
</style>
</head>
<body>
<div class="dong"></div>
<div class="donghua2">这是一个动画</div>
</body>
</html>
