*/
33 background-origin: border-box ;
34 /*指定对象的背景图像向外裁剪的区域。*/
35 background-clip: border-box;
36 }
37 .div2{
38 background-origin: padding-box ;
39 /*设置外上边距*/
40 margin-top: 40px;
41 background-clip: padding-box;
42 }
43 .div3{
44 background-origin: content-box ;
45 margin-top: 40px;
46 background-clip: content-box;
47 }
48 </style>
49 </head>
50 <body>
51 <div class="div1">示例1</div>
52 <div class="div2">示例2</div>
53 <div class="div3">示例3</div>
54 </body>
55 </html>
②在一个元素中显示多个背景图像
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
2、 圆角边框
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值:第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
/*四个参数由左上角开始按顺时针方向排序*/
border-radius: 50px 10px 30px 70px;
3、 使用图像边框
四、 CSS3 中的变形处理
1、 transform功能的基础知识(见CSS基础2D、3D部分)：rotate（旋转）、scale（x,y）（缩放）、translate（移动）、skew（x-angle,y-angle）（倾斜）。
2、 对一个元素使用多种变形方法
1 transform: translate(200px,200px) rotate(45deg) scale(2.5) skew(20deg,20deg);
transform后可跟一到四个属性值，每个属性值按先后顺序起作用。
3、 指定变形的基准点
transform-origin: x-axis y-axis z-axis;
五、 CSS3 中的动画功能
1、 transitions 功能
< !—transition: property duration timing-function-->
transition: background-color 3s linear;
可拆分为以下三部分：
transition-property: background-color ;
transition-duration: 3s;
transition-timing-function: linear ;
( transition-timing-function属性指定切换效果的速度。)
示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 div{
8 background-color: #ffff00;
9 color: black;
10 width: 100px;
11 transition: transform 1s linear,color 1s linear,width 1s linear;
12 }
13 div:hover{
14 transform: rotate(360deg);
15 color: white;
16 width: 200px;
17 }
18 </style>
19 </head>
20 <body>
21 <div>示例文字</div>
22 </body>
23 </html>
2、 Animations功能
背景颜色动态变化及旋转示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 div{
8 position: absolute;
9 background-color: red;
10 top: 100px;
11 width: 500px;
12 }
13 @-webkit-keyframes mycolor {
14 /*开始帧*/
15 0%{background-color: red; transform: rotate(0deg)}
16 /*背景颜色变化帧-黄色*/
17 40%{background-color: #ffff00; transform: rotate(30deg)}
18 /*背景颜色变化帧-蓝色*/
19 70%{background-color: aqua; transform: rotate(-30deg)}
20 /*结束帧*/
21 100%{background-color: red; transform: rotate(0deg)}
22 }
23 div:hover{
24 -webkit-animation: mycolor 5s linear;
25 }
26 </style>
27 </head>
28 <body>
29 <div>示例文字</div>
30 </body>
31 </html>