本文最后更新于：December 3, 2021 pm

CSS3 是最新的 CSS 标准。使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块、背景边框、文字特效、多栏布局等等。CSS3的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。

CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

1.1 移动（translate() ）

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

使用实例：

div{
transform: translate(50px,100px); /*从左边元素移动50个像素，并从顶部移动100像素。*/
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

1.2 旋转（rotate()）

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

使用实例：

div{
transform: rotate(30deg);/*顺时针旋转30度。*/
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

1.3 大小（scale()）

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

使用实例：

div{
transform: scale(2,4);/*宽度为原来的大小的2倍，和其原始大小4倍的高度。*/
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
}

1.4 倾斜（skew()）

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

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

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

使用实例：

div{
transform: skew(30deg,20deg);/*元素在X轴和Y轴上倾斜20度和30度。*/
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

1.5 matrix() 方法

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

使用实例：利用matrix()方法旋转div元素30°

div{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

1.6 transform 属性

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
语法：

1	`transform: none\|transform-functions;`

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

使用实例：旋转 div 元素

div{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}

1.7 transform-origin 属性

transform-Origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
语法：

1	`transform-origin: x-axis y-axis z-axis;`

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值：left、center、right、length、%
y-axis	定义视图被置于 Y 轴的何处。可能的值：top、center、bottom、length、%
z-axis	定义视图被置于 Z 轴的何处。可能的值：length

使用实例：设置旋转元素的基点位置

div{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}

2.3D转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

函数	描述
matrix3d(n,n, n,n,n,n ,n,n,n* ,n,n,n, n,n,n,*n )	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

CSS3所有的转换属性：

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

2.1 绕X轴旋转（rotateX()）

rotateX()方法，围绕X轴旋转，以给定的度数。

使用实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3C(w3cschool.cn)</title> 
<style> 
div{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2{
    transform:rotateX(120deg);
    -webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

2.2 绕Y轴旋转（rotateY()）

rotateY()方法，围绕Y轴旋转，以给定的度数。

使用实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3C(w3cschool.cn)</title> 
<style> 
div{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2{
	transform:rotateY(130deg);
	-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

3.过渡

CSS3中，为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

所有的过渡属性：

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性

指定效果的持续时间。

使用实例1：应用于宽度属性的过渡效果，时长为 2 秒

div{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

如果未指定的期限，transition将没有任何效果，因为默认值是0。

使用实例2：当鼠标指针悬浮(:hover)于 div 元素上时

1
2
3

div:hover{
width:300px;
}

3.1 多项改变

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

使用实例：添加宽度，高度和转换效果

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

3.2 设置所有属性

3.2.1 实例1

在一个例子中使用所有过渡属性。

div{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

3.2.2 实例2

与上面的例子相同的过渡效果，但是简写的 transition 属性。

div{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}

4.动画

CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

@keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 “ease”。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。	3

4.1 @keyframes 规则

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

实例：

@keyframes myfirst{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少两个CSS3的动画属性绑定向一个选择器：

规定动画的名称

规定动画的时长

使用实例：把 “myfirst” 动画捆绑到 div 元素，时长：5 秒

div{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

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

@keyframes myfirst{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

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

使用实例1：改变背景色和位置

@keyframes myfirst{
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;}
}

   @-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;}
}

4.2 所有属性使用

4.2.1 实例1

实例1：

div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

4.2.2 实例2

与实例1动画相同，只是简写了动画 animation 属性。
实例2：

div{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

5.多列

通过 CSS3，能够创建多个列来对文本进行布局 - 就像报纸那样。
所有 CSS3 的新多列属性：

属性	说明	CSS
column-count	指定元素应分为的列数	3
column-fill	指定如何填充列	3
column-gap	指定列之间差距	3
column-rule	一个用于设置所有列规则的简写属性	3
column-rule-color	指定的列之间颜色规则	3
column-rule-style	指定的列之间的样式规则	3
column-rule-width	指定的列之间的宽度规则	3
column-span	指定一个元素应该横跨多少列	3
column-width	指定列的宽度	3
columns	缩写属性设置列宽和列数	3

5.1 创建多列

column-count属性指定元素的列数应分为什么。

使用实例：划分成三列的div元素的文本

div{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

5.2 指定列之间的差距

column-gap属性指定的列之间的差距。

使用实例：指定列之间40个像素差距

div{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}

5.3 列规则

column-rule属性设置列之间的宽度，样式和颜色。

使用实例：指定列之间的宽度，样式和颜色的规则

div{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

6.用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。
用户界面属性：

属性	说明	CSS
appearance	允许您使一个元素的外观像一个标准的用户界面元素	3
box-sizing	允许你以适应区域而用某种方式定义某些元素	3
icon	Provides the author the ability to style an element with an iconic equivalent	3
nav-down	指定在何处使用箭头向下导航键时进行导航	3
nav-index	指定一个元素的Tab的顺序	3
nav-left	指定在何处使用左侧的箭头导航键进行导航	3
nav-right	指定在何处使用右侧的箭头导航键进行导航	3
nav-up	指定在何处使用箭头向上导航键时进行导航	3
outline-offset	外轮廓修饰并绘制超出边框的边缘	3
resize	指定一个元素是否是由用户调整大小	3

6.1 调整尺寸（Resizing）

resize属性指定一个元素是否应该由用户去调整大小。

使用实例：由用户指定一个div元素尺寸大小

div{
    resize:both;
    overflow:auto;
}

6.2 方框大小调整（Box Sizing）

box-sizing 属性允许以确切的方式定义适应某个区域的具体内容。

使用实例：规定两个并排的带边框方框

div{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    width:50%;
    float:left;
}

6.3 外形修饰（outline-offset ）

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：1.轮廓不占用空间。2.轮廓可能是非矩形。

使用实例：规定边框边缘之外 15 像素处的轮廓

div{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

7.图片

使用 CSS 来布局图片。

7.1 圆角图片

实例：

1
2
3

img {
    border-radius: 8px;
}

7.2 椭圆形图片

1
2
3

img {
    border-radius: 50%;
}

7.3 缩略图（border）

使用 border 属性来创建缩略图。
实例1：

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

<img src="paris.jpg" alt="Paris">

实例2：

a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}

<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

7.4 响应式图片

响应式图片会自动适配各种尺寸的屏幕。

使用实例：需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值

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

7.5 卡片式图片

实例：

div.polaroid {
    width: 80%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
    text-align: center;
    padding: 10px 20px;
}

7.6 图片滤镜（filter）

filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。

使用实例：修改所有图片的颜色为黑白 (100% 灰度)

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

7.7 响应式图片相册

实例：

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

8.按钮

实例：

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

8.1 按钮颜色（background-color）

使用 background-color 属性来设置按钮颜色。

使用实例：

.button1 {background-color: #4CAF50;} /* Green */
.button2{background-color: #008CBA;} /* Blue */
.button3 {background-color:#f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5{background-color: #555555;} /* Black */

8.2 按钮大小（font-size）

使用 font-size 属性来设置按钮大小。

使用实例：

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3{font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

8.3 圆角按钮（border-radius）

使用 border-radius 属性来设置圆角按钮。

使用实例：

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3{border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

8.4 按钮边框颜色（border）

使用 border 属性设置按钮边框颜色。

使用实例：

.button1 {
    background-color: white;
    color: black;
   border: 2px solid #4CAF50; /* Green */
}

8.5 鼠标悬停按钮

使用 :hover 选择器来修改鼠标悬停在按钮上的样式。可以使用 transition-duration 属性来设置 “hover” 效果的速度。

使用实例：

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
}

.button:hover {
   background-color: #4CAF50; /* Green */
    color: white;
}

8.6 按钮阴影（box-shadow）

阴影按钮鼠标悬停后显示阴影。可以使用 box-shadow 属性来为按钮添加阴影。

使用实例：

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

8.7 禁用按钮（opacity）

正常按钮禁用按钮。可以使用 opacity 属性为按钮添加透明度 (看起来类似”disabled” 属性效果)。
可以添加 cursor 属性并设置为”not-allowed” 来设置一个禁用的图片。

使用实例：

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

8.8 按钮宽度（width）

默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。可以使用 width 属性来设置按钮的宽度。如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。

使用实例：

1
2
3

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width:100%;}

8.9 按钮组

移除外边距并添加 float:left 来设置按钮组。

使用实例：

1
2
3

.button {
    float: left;
}

8.10 带边框按钮组（border）

使用 border 属性来设置带边框的按钮组。

使用实例：

.button {
    float: left;
    border: 1pxsolid green
}

8.11 按钮动画

8.11.1 实例1

使用实例：鼠标移动到按钮上后添加箭头标记

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS3</title> 
<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
</head>
<body>

<h2>按钮动画</h2>

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

</body>
</html>

8.11.2 实例2

使用实例：点击时添加 “波纹” 效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS3</title> 
<style>
.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}
</style>
</head>
<body>

<h2>按钮动画 - 波纹效果</h2>

<button class="button">Click Me</button>

</body>
</html>

8.11.3 实例3

使用实例：点击时添加 “压下” 效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS3</title> 
<style>
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
</head>
<body>

<h2>按钮动画 - "按压效果"</h2>

<button class="button">Click Me</button>

</body>
</html>

9.分页实例

使用 CSS 来创建分页的实例。

9.1 简单分页

如果网站有很多个页面，就需要使用分页来为每个页面做导航。

使用实例：

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

9.2 点击及鼠标悬停分页样式

如果点击当前页，可以使用 .active 来设置当期页样式，鼠标悬停可以使用 :hover 选择器来修改样式。

使用实例：

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

9.3 圆角样式

使用 border-radius 属性为选中的页码来添加圆角样式。

使用实例：

ul.pagination li a {
    border-radius: 5px;
}

ul.pagination li a.active {
    border-radius: 5px;
}

9.4 鼠标悬停过渡效果

通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果。

使用实例：

1
2
3

ul.pagination li a {
    transition: background-color .3s;
}

9.5 带边框分页

使用 border 属性来添加带边框分页。

使用实例：

1
2
3

ul.pagination li a {
    border: 1px solid #ddd; /* Gray */
}

9.6 圆角边框

在第一个分页链接和最后一个分页链接添加圆角。

使用实例：

.pagination li:first-child a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

9.7 分页间隔

使用 margin 属性来为每个页码直接添加空格。

使用实例：

1
2
3

ul.pagination li a {
    margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}

9.8 分页字体大小

使用 font-size 属性来设置分页的字体大小。

使用实例：

1
2
3

ul.pagination li a {
    font-size: 22px;
}

9.9 居中分页

在容器元素上 (如 div ) 添加 text-align:center 样式。

使用实例：

1
2
3

div.center {
    text-align: center;
}

10.框大小

box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。

10.1 不使用 CSS3 box-sizing 属性

默认情况下，元素的宽度与高度计算方式如下：
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度

这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。

这个是个较小的框 (width 为 300px ，height 为 100px)。
这个是个较大的框 (width 为 300px ，height 为 100px)。
以上两个 div 元素虽然宽度与高度设置一样，但真实展示的大小不一致，因为 div2 指定了内边距。

使用实例：

.div1 {
    width: 300px;
    height:100px;
    border: 1px solid blue;
}

.div2 {
    width: 300px;
   height: 100px;
    padding: 50px;
   border: 1px solid red;
}

使用这种方式如果想要获得较小的那个框且包含内边距，就需要考虑到边框和内边距的宽度。CSS3 的 box-sizing 属性很好的解决了这个问题。

10.2 使用 CSS3 box-sizing 属性

CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中。

使用实例：

.div1 {
    width: 300px;
    height:100px;
    border: 1px solid blue;
   box-sizing: border-box;
}

.div2 {
    width: 300px;
   height: 100px;
    padding: 50px;
   border: 1px solid red;
    box-sizing: border-box;
}

WEB前端

本文作者: 墨水记忆
本文链接: https://tothefor.com/DragonOne/261303318.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

WEB前端-JavaScript学习（一） Previous

WEB前端-CSS3基础知识复习（一） Next

WEB前端-CSS3基础知识复习（二）

目录

1.2D转换

1.1 移动 （translate() ）

1.2 旋转（rotate()）

1.3 大小（scale()）

1.4 倾斜（skew()）

1.5 matrix() 方法

1.6 transform 属性

1.7 transform-origin 属性

2.3D转换

2.1 绕X轴旋转（rotateX()）

2.2 绕Y轴旋转（rotateY()）

3.过渡

3.1 多项改变

3.2 设置所有属性

3.2.1 实例1

3.2.2 实例2

4.动画

4.1 @keyframes 规则

4.2 所有属性使用

4.2.1 实例1

4.2.2 实例2

5.多列

5.1 创建多列

5.2 指定列之间的差距

5.3 列规则

6.用户界面

6.1 调整尺寸（Resizing）

6.2 方框大小调整（Box Sizing）

6.3 外形修饰（outline-offset ）

7.图片

7.1 圆角图片

7.2 椭圆形图片

7.3 缩略图（border）

7.4 响应式图片

7.5 卡片式图片

7.6 图片滤镜（filter）

7.7 响应式图片相册

8.按钮

8.1 按钮颜色（background-color）

8.2 按钮大小（font-size）

8.3 圆角按钮（border-radius）

8.4 按钮边框颜色（border）

8.5 鼠标悬停按钮

8.6 按钮阴影（box-shadow）

8.7 禁用按钮（opacity）

8.8 按钮宽度（width）

8.9 按钮组

8.10 带边框按钮组（border）

8.11 按钮动画

8.11.1 实例1

8.11.2 实例2

8.11.3 实例3

9.分页实例

9.1 简单分页

9.2 点击及鼠标悬停分页样式

9.3 圆角样式

9.4 鼠标悬停过渡效果

9.5 带边框分页

9.6 圆角边框

9.7 分页间隔

9.8 分页字体大小

9.9 居中分页

10.框大小

10.1 不使用 CSS3 box-sizing 属性

10.2 使用 CSS3 box-sizing 属性

1.1 移动（translate() ）