HTML5--------------------------CSS3的属性应用与实例----------------------

1属性选择器；

 

 

2伪类选择器：

 

 

 

 

3伪元素选择器：

 

 

 

进度条

<progress></progress>

 

4文本阴影

   text-shadow: 2px 2px 8px #000;

   none： 无阴影

   第1个长度值用来设置对象的阴影水平偏移值。可以为负值

   第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

   第3个长度值则用来设置对象的阴影模糊值。不允许负值

   设置对象的阴影的颜色。

 

5文本换行

   word-wrap: normal;

   默认处理方式

   white-space: pre;

   不合并文字间的空白距离，当文字超出边界时不换行

     white-space: pre-wrap;

   不合并文字间的空白距离，当文字碰到边界时发生换行

   white-space: pre-line;

   保持文本的换行（代码中的换行符），不保留文字间的空白距离，当文字碰到边界时发生换行

   white-space: nowrap;

   强制在同一行内显示所有文本

 

6文本溢出：

   一行溢出

   text-overflow: ellipsis;

   white-space: nowrap;

   overflow: hidden;

   将超出盒子的文本切掉

   超出文章的文本以...显示

   一行文本溢出 需要同时拥有三个属性

  多行溢出

   overflow: hidden;

   display: -webkit-box;

   控制显示几行文本 后面加···

   -webkit-line-clamp: 4;

   -webkit-box-orient: vertical;

   

7边框阴影

   box-shadow: -2px -2px 5px #000;

   水平偏移量 正值向右 负值向左 垂直正值向下 负值向上

   box-shadow: inset 20px 20px 0px -10px green,

                        inset 20px 20px 20px -10px #000,

                        20px 20px 10px red,

                        20px 20px 10px blue;

   多个内外阴影

 

8  渐变--线性

   background-image: linear-gradient(0deg, yellow, green);

   用角度确定方向

   background-image: linear-gradient(to top, yellow, green);

   用关键字来确定方向

   background-image: linear-gradient(to left, yellow 20%, green 40%, blue 80%);

   控制渐变

9渐变--径向

   

 

10渐变--重复

   

   实例（立体按钮、球体、滚动条）

  

 

  

 

11动画应用