CSS3技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/xxxxxxxr/article/details/122448562

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

不使用 CSS3 box-sizing 属性

默认情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

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

使用 CSS3 box-sizing 属性

CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

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

CSS 分页实例

本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。

简单分页

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

以下实例演示了如何使用 HTML 和 CSS 来创建分页：

CSS 实例

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

尝试一下 »

点击及鼠标悬停分页样式

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

CSS 实例

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

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

尝试一下 »

CSS 实例

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

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

尝试一下 »

圆角样式

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

CSS 实例

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

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

尝试一下 »

鼠标悬停过渡效果

我们可以通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果:

CSS 实例

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

尝试一下 »

带边框分页

我们可以使用 border 属性来添加带边框分页:

CSS 实例

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

尝试一下 »

圆角边框

提示: 在第一个分页链接和最后一个分页链接添加圆角：

CSS 实例

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

尝试一下 »

分页间隔

提示: 你可以使用 margin 属性来为每个页码直接添加空格：

CSS 实例

ul.pagination li a {
margin: 0 4px; /* 0 对应的是头部与底部，可以修改它看看效果 */
}

尝试一下 »

分页字体大小

我们可以使用 font-size 属性来设置分页的字体大小:

CSS 实例

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

尝试一下 »

居中分页

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

CSS 实例

div.center {
text-align: center;
}

尝试一下 »

面包屑导航

首页
前端
HTML 教程
HTML 段落

另外一种导航为面包屑导航，实例如下：

CSS 实例

ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
尝试一下 »

基本按钮样式

默认按钮 CSS 按钮

实例

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

尝试一下 »

按钮颜色

Green Blue Red Gray Black

我们可以使用 background-color 属性来设置按钮颜色:

实例

.button1 {background-color: #4CAF50;} /* 绿色 */ .button2 {background-color: #008CBA;} /* 蓝色 */ .button3 {background-color: #f44336;} /* 红色 */ .button4 {background-color: #e7e7e7; color: black;} /* 灰色 */ .button5 {background-color: #555555;} /* 黑色 */

尝试一下 »

按钮大小

10px 12px 16px 20px 24px

我们可以使用 font-size 属性来设置按钮大小:

实例

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

尝试一下 »

圆角按钮

2px 4px 8px 12px 50%

我们可以使用 border-radius 属性来设置圆角按钮:

实例

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

尝试一下 »

按钮边框颜色

绿蓝红灰黑

我们可以使用 border 属性设置按钮边框颜色:

实例

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

尝试一下 »

鼠标悬停按钮

绿蓝红灰黑
绿蓝红灰黑

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

提示: 我们可以使用 transition-duration 属性来设置 "hover" 效果的速度:

实例

.button { -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; } .button:hover { background-color: #4CAF50; /* Green */ color: white; } ...

尝试一下 »

按钮阴影

阴影按钮鼠标悬停后显示阴影

我们可以使用 box-shadow 属性来为按钮添加阴影:

实例

.button1 { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } .button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); }

尝试一下 »

禁用按钮

正常按钮禁用按钮

我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。

提示: 我们可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片:

实例

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

尝试一下 »

按钮宽度

250px
50% 100%

默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。我们可以使用 width 属性来设置按钮的宽度:

提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。

实例

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

尝试一下 »

按钮组

ButtonButtonButtonButton

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

实例

.button { float: left; }

尝试一下 »

带边框按钮组

ButtonButtonButtonButton

我们可以使用 border 属性来设置带边框的按钮组:

实例

.button { float: left; border: 1px solid green }

尝试一下 »

实例

.btn-group button { background-color: #04AA6D; /* 绿色背景 */ border: 1px solid green; /* 绿色边框 */ color: white; /* 白色文本 */ padding: 10px 24px; /* 内边距离、 */ cursor: pointer; /* 指针/手形图标 */ float: left; /* 并排浮动按钮 */ }

尝试一下 »

按钮动画

实例

鼠标移动到按钮上后添加箭头标记:

Hover

尝试一下 »

实例

点击时添加 "波纹" 效果:

Click

尝试一下 »

实例

点击时添加 "压下" 效果:

Click

尝试一下 »

更多按钮样式可以使用 CSS 按钮生成器：CSS 按钮生成器 | 菜鸟工具

新的用户界面特性

属性	说明	CSS
appearance	允许您使一个元素的外观像一个标准的用户界面元素	3
box-sizing	允许你以适应区域而用某种方式定义某些元素	3
icon	为创作者提供了将元素设置为图标等价物的能力。	3
nav-down	指定在何处使用箭头向下导航键时进行导航	3
nav-index	指定一个元素的Tab的顺序	3
nav-left	指定在何处使用左侧的箭头导航键进行导航	3
nav-right	指定在何处使用右侧的箭头导航键进行导航	3
nav-up	指定在何处使用箭头向上导航键时进行导航	3
outline-offset	外轮廓修饰并绘制超出边框的边缘	3
resize	指定一个元素是否是由用户调整大小	3

CSS3 创建多列

column-count 属性指定了需要分割的列数。

CSS3 多列中列与列间的间隙

column-gap 属性指定了列与列间的间隙。

CSS3 列边框

column-rule-style 属性指定了列与列间的边框样式：

指定列的宽度

column-width 属性指定了列的宽度。

下表列出了所有 CSS3 的多列属性：

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	column-width 与 column-count 的简写属性。

CSS3 动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

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

CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3

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

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

指定要添加效果的CSS属性
指定效果的持续时间。

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

指定的CSS属性的值更改时效果会发生变化。

下表列出了所有的过渡属性:

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

下表列出了所有的转换属性：

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

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 转换元素的透视视图。

skew() 方法

语法

transform:skew(<angle> [,<angle>]);

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

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

新转换属性

以下列出了所有的转换属性:

Property	描述	CSS
transform	适用于2D或3D转换的元素	3
transform-origin	允许您更改转化元素位置	3

2D 转换方法

函数	描述
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 轴。

CSS3 @font-face 规则

使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。

您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

使用您需要的字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

	提示：URL请使用小写字母的字体，大写字母在IE中会产生意外的结果

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

使用粗体文本

您必须添加另一个包含粗体文字的@font-face规则

CSS3 字体描述

下表列出了所有的字体描述和里面的@font-face规则定义：

描述符	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义如何拉伸字体。默认是 "normal"。
font-style	normal italic oblique	可选。定义字体的样式。默认是 "normal"。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认是 "normal"。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

CSS3 的文本阴影

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

阴影效果!

您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：

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

CSS3的换行

如果某个单词太长，不适合在一个区域内，它扩展到外面：

CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：

新文本属性

属性	描述	CSS
hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	3

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

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变相关属性：background-image。

线性渐变在线工具：渐变在线工具。

CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

语法

background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

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

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

CSS3 径向渐变

径向渐变由它的中心定义。

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

不同尺寸大小关键字的使用

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

closest-side
farthest-side
closest-corner
farthest-corner

CSS3 中包含几个新的背景属性，提供更大背景元素控制。

在本章您将了解以下背景属性：

background-image
background-size
background-origin
background-clip

CSS3中可以通过background-image属性添加背景图片。

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

background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

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

新的背景属性

顺序	描述	CSS
background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3
background-size	规定背景图片的尺寸。	3

CSS3 圆角

使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。

CSS3 border-radius - 指定每个圆角

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

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

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

CSS3 圆角属性

属性	描述
border-radius	所有四个边角 border---radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

新边框属性

属性	说明	CSS
border-image	设置所有边框图像的速记属性。	3
border-radius	一个用于设置所有四个边框- *-半径属性的速记属性	3
box-shadow	附加一个或多个下拉框的阴影	3