CSS3学习（圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等）

matrix

CSS3

1.  圆角

border-radius：边框圆角的圆角半径

四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值：第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值：第一个值为左上角与右下角，第二个值为右上角与左下角

一个值：四个圆角值相同

2.图片

border-image：有了CSS3的border-image属性，你可以使用图像创建一个边框：border-image属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：

border-image-source：用于指定要用于绘制边框的图片的位置；

border-image-slice：图像边界向内偏移；

border-image-width：图像的边界的宽度；

border-image-outset：用于指定在边框外部绘制 border-image-area 的量；

border-image-repeat：这个例子演示了如何创建一个border-image 属性的按钮。

3.阴影

box-shadow：边框阴影。例如  box-shadow: 50px 50px 5px #888888   第一个50px是指阴影距离边框的左右距离，值也可以是负的，向右为正，向左为负。第二个                                50px是指阴影边距离边框的上下距离，值也可以是负的，向下为正，向上为负。5px是距离上一个<div>的距离，距离越远，阴影面积就越大，也会越模                                   糊。#888888是指阴影的颜色。

4.背景

background-image   添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

background-size      指定背景图像的大小。CSS3中可以指定背景图片，可以在不同的环境中指定背景图片的大小。可以指定像素或百分比大小。指定的大小是相对于父元                                     素的宽度和高度的百分比的大小。

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

background-clip      背景剪裁属性是从指定位置开始绘制

5.渐变

渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

线性渐变：（Linear Gradients）- 向下/向上/向左/向右/对角方向

例如：

background: -webkit-linear-gradient(red, blue); 
                             background: -o-linear-gradient(red, blue); 
                             background: -moz-linear-gradient(red, blue);
                             background: linear-gradient(red, blue);

上面代码表示从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

径向渐变：（Radial Gradients）- 由它们的中心定义

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

shape： 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

size 参数定义了渐变的大小。它可以是以下四个值：

closest-side

farthest-side

closest-corner

farthest-corner

6.文本效果

text-shadow：文本阴影。 text-shadow: 5px 5px 5px #FF0000    和边界阴影效果相同

box-shadow：盒子阴影   box-shadow: 10px 10px 5px grey

text-overflow:文本溢出

word-wrap:break-word;文本换行

Word Breaking：指定换行规则

7.字体

CSS3中，设计网页时可以使用任意字体，在使用之前必须首先定义字体的名称（比如 myFirstFont），然后再通过 font-family 属性来引用字体的名称 (myFirstFont)。

8.  2D转换

2D转换是指可以移动，比例化，反过来，旋转，和拉伸元素。2D转换的方法有：

translate(); translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

例如 <div style="width:300px;height:100px; -webkit-transform:translate(100px,100px)">表示向右方、下方各移动了100px。

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

例如  <div style="width:300px;height:100px; -webkit-transform:rotate(30deg)">表示顺时针倾斜了30度。

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

例如  <div style="width:300px;height:100px; -webkit-transform:scale(2,3)">  表示x轴扩大了2倍，y轴扩大了3倍。

skew()； skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：

例如   <div style="width:300px;height:100px; -webkit-transform:skew(30deg,20deg);">   表示绕X轴和Y轴周围20度30度的元素。

matrix();    matrix方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

例如   <div style="width:300px;height:100px; -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);">  表示利用matrix()方法旋转div元素30°

9.  3D转换

rotateX()； 围绕其在一个给定度数X轴旋转的元素。

例如  <div style="width:300px;height:100px; -webkit-transform: rotateX(60deg);"></div>  表示围绕X轴旋转60度，好比60度时在X平面的投影。

rotate(Y) 和  rotateX() 效果一样

10.过渡

过渡是元素从一种样式逐渐改变为另一种的效果。

例如  <div style="width:300px;height:100px; -webkit-transition: width 2s;">如果未指定的期限，transition将没有任何效果，因为默认值是0。指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

过渡效果代码未打出

要添加多个样式的变换效果，添加的属性由逗号分隔：

{-webkit-transition: width 2s, height 2s, -webkit-transform 2s;}

11.动画

CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。要创建CSS3动画，你将不得不了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

-webkit-keyframes myfirst /* Safari and Chrome */
               {
                      0%   {background: red;}
                      25%  {background: yellow;}
                      50%  {background: blue;}
                      100% {background: green;}
               }

改变背景色和位置：

-webkit-keyframes myfirst /* Safari and Chrome */
                 {
                      0%   {background: red; left:0px; top:0px;}
                      25%  {background: yellow; left:200px; top:0px;}
                      50%  {background: blue; left:200px; top:200px;}
                      75%  {background: green; left:0px; top:200px;}
                      100% {background: red; left:0px; top:0px;}
                  }

12.多列

column-count 属性指定了需要分割的列数。-webkit-column-count: 3;表示将 <div> 元素中的文本分为 3 列。

column-gap 属性指定了列与列间的间隙。-webkit-column-gap: 40px;表示列与列之间的距离是40像素。

    column-rule-style 属性指定了列与列间的边框样式：-webkit-column-rule-style: solid;表示列与列之间是实线。

column-rule-width 属性指定了两列的边框厚度:-webkit-column-rule-width:10px； 表示列与列之间实线的宽度是10px

    column-rule-color 属性指定了两列的边框颜色

column-rule 属性是 column-rule-* 所有属性的简写。-webkit-column-rule: 1px solid lightblue;表示列之间的边框的厚度，样式及颜色。

-webkit-column-span表示指定元素跨多少列。h2{-webkit-column-span: all;}表示标题h2跨越多有的列。

     column-width 属性指定了列的宽度。-webkit-column-width: 100px;表示列的宽度为100px。

13.用户界面

resize属性指定一个元素是否应该由用户去调整大小。div{ resize:both; overflow:auto;}  表示这个 div 元素由用户调整大小。

box-sizing 属性允许以确切的方式定义适应某个区域的具体内容。-moz-box-sizing: border-box;width:50%; float:left;  表示div分成了2个，各占50%。

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。div
                            div{
                                   border:2px solid black;
                                   outline:2px solid red;
                                   outline-offset:15px;
                             }

上面代码表示边框边缘之外 15 像素处的轮廓。

14.图片

椭圆形图片：border-radius: 50%;  圆角为边界的50%时，图片就变成了椭圆。

略缩图：使用 border 属性来创建缩略图

影响式图片：响应式图片会自动适配各种尺寸的屏幕。 如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

img {
                                        max-width: 100%;
                                        height: auto;
                                    }

图片文本：可以将文本写在图片的左上角、左下角、右上角、右下角、居中。（代码未写出）

卡式图片：

图片滤镜： filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。-webkit-filter: grayscale(100%);表示修改所有图片的颜色为黑白 (100% 灰度)。

响应式图片相册：

图片Modal（模态）：

15.按钮

按钮颜色： background-color     .button1 {}

按钮大小：font-size     .button1 {font-size: 10px;}

图角按钮： border-radius    .button5 {border-radius: 50%;}

按钮边框颜色： border      border: 2px solid #4CAF50;

鼠标悬停按钮：可以使用hover 选择器来修改鼠标悬停在按钮上的样式。

效果速度：transition-duration    -webkit-transition-duration: 0.4s;表示效果速度是0.4s。

.button:hover {

color: white;

}

上面代码表示按钮的颜色是白色，当把鼠标放在按钮上0.4s以后，按钮变成#4CAF50（绿色）。

按钮阴影： box-shadow   表示鼠标放在按钮上以后按钮会显示阴影。

禁用按钮：opacity

.disabled {
                                      opacity: 0.6;
                                      cursor: not-allowed;
                                      }

上面代码表示禁用按钮，鼠标放在按钮上以后显示一个禁用的图片（not-allowed）。

按钮宽度：width   button1 {width: 250px;}  表示宽度为250px的按钮。  button2 {width: 50%;}  宽度为50%的按钮。

按钮组：移除外边距并添加 float:left 来设置按钮组:   button { float: left;}

按钮动画：

16.分页

简单分页：

圆角样式：border-radius

鼠标悬停过渡效果： transition

圆角边框：

分页间隔： margin

分页字体大小：font-size

居中分页：在容器元素上 (如 <div>) 添加 text-align:center 样式