css3

一：CSS3 圆角

border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性

注意：这个属性允许你为元素添加圆角边框！

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同

二：CSS3 背景

1. background-size 属性：background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。

您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>background-size</title> 
 6 <style> 
 7 body
 8 {
 9     background:url(/try/demo_source/img_flwr.gif);
10     background-size:80px 60px;
11     background-repeat:no-repeat;
12     padding-top:40px;
13 }
14 </style>
15 </head>
16 <body>
17 <p>
18 Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
19 </p>
20 
21 <p>原始图片: <img src="/try/demo_source/img_flwr.gif"  alt="Flowers" width="224" height="162"></p>
22 
23 </body>
24 </html>

效果图;

2.CSS3的background-Origin属性:background-Origin属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。

3.CSS3 background-clip属性：CSS3中background-clip背景剪裁属性是从指定位置开始绘制

三：CSS3 文本效果

1.CSS3 的文本阴影：CSS3 中，text-shadow属性适用于文本阴影。

2.CSS3 box-shadow属性：CSS3 中 CSS3 box-shadow 属性适用于盒子阴影

3.CSS3 text-overflow 属性：text-overflow属性指定当文本溢出包含它的元素，应该发生什么。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>菜鸟教程(runoob.com)</title> 
 6 <style> 
 7 div.test
 8 {
 9     white-space:nowrap; 
10     width:12em; 
11     overflow:hidden; 
12     border:1px solid #000000;
13 }
14 </style>
15 </head>
16 <body>
17 
18 <p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
19 <p>div 使用 &quot;text-overflow:ellipsis&quot;:</p>
20 
21 <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
22 <p>div 使用 &quot;text-overflow:clip&quot;:</p>
23 <div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
24 <p>div 使用自定义字符串 &quot;text-overflow: &gt;&gt;&quot;(只在 Firefox 浏览器下有效):</p>
25 <div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
26 </body>
27 </html>

效果：

四：CSS3 transform 属性

一：2D 转换

1.translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

2.rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

3.scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

4.skew() 方法：包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX(<angle>);表示只在X轴(水平方向)倾斜。

skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

5.matrix()方法和2D变换方法合并成一个。matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

二：3D转换

五：CSS3 过渡

transition 属性设置元素当过渡效果，四个简写属性为：

transition-property：规定应用过渡的 CSS 属性的名称。
transition-duration：定义过渡效果花费的时间。默认是 0。
transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。
transition-delay：规定过渡效果何时开始。默认是 0。

六：CSS3 动画

animation:

animation-name：动画的名字，必须与@keyframes配合使用
@keyframes 定义关键帧动画,名字随便取，上面调用的时候用这个名字即可

animation-duration：动画的时间。从0 - 100 的时间

animation-timing-function : 参照前面过渡的默认值是ease
steps(<integer>[, [ start | end ] ]?)
step-start：等同于 steps(1, start)
step-end：等同于 steps(1, end)

animation-delay: 动画的延迟时间默认值是0s

animation-iteration-count：动画的循环次数默认值是一次
infinite：无限循环

animation-direction : 必须建立在循环的基础之上的
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行

animation-fill-mode 动画本身是完成以后要恢复到初始的状态
none：不设置对象动画之外的状态
forwards：保留动画最后一帧的状态
backwards：动画开始前直接以第一帧的形式展现
both：想设置这两个都有效果，就用both

animation-play-state: 取值可以是paused 让动画暂停

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         @keyframes change-color{
 8             0%{
 9                 background-color: red;
10     
11             }
12             25%{
13                 background-color: green;
14             }
15             50%{
16                 background-color: yellow;
17             }
18             75%{
19                 background-color: blue;
20             }
21             100%{
22                 background-color: brown;
23             }
24         }
25         div{
26             width: 100px;
27             height: 100px;
28             background-color: black;
29 
30             animation: change-color 10s steps(5,end);
31             /*start   保留下一帧状态，知道动画结束 */
32             /*end     保留当前帧状态，直到动画结束*/
33 
34         }
35     </style>
36 </head>
37 <body>
38     <div></div>
39 </body>
40 </html>

七：CSS3 弹性盒子(Flex Box)

flex布局：

1.在使用flex布局是，必须先指定布局为flex布局; display:flex;

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>菜鸟教程(runoob.com)</title> 
 6 <style> 
 7 .flex-container {
 8     display: -webkit-flex;
 9     display: flex;
10     width: 400px;
11     height: 250px;
12     background-color: lightgrey;
13 }
14 
15 .flex-item {
16     background-color: cornflowerblue;
17     width: 100px;
18     height: 100px;
19     margin: 10px;
20 }
21 </style>
22 </head>
23 <body>
24 
25 <div class="flex-container">
26   <div class="flex-item">flex item 1</div>
27   <div class="flex-item">flex item 2</div>
28   <div class="flex-item">flex item 3</div>  
29 </div>
30 
31 </body>
32 </html>