CSS3基础知识及详情

最新推荐文章于 2024-10-03 10:48:55 发布
最新推荐文章于 2024-10-03 10:48:55 发布
阅读量1.1k 收藏 12
点赞数 1
分类专栏： 前端 文章标签： css3 css html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42213425/article/details/120293561
版权

CSS3基础知识及详情

什么是CSS3

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。

在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

注意：此课程不支持IE9版本以下，建议使用chrome、safari、firefox、opera浏览器的最高版本学习本课程。

CSS3能做什么？

CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。
CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。

对CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。

CSS3 模块

CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。

一些最重要CSS3模块如下：

  • 选择器
  • 盒模型
  • 背景和边框
  • 文字特效
  • 2D/3D转换
  • 动画
  • 多列布局
  • 用户界面
  • CSS3 建议

W3C的CSS3规范仍在开发。

但是，许多新的CSS3属性已在现代浏览器使用。

CSS3 边框

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序

1、CSS3 圆角

在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。
在 CSS3 中，很容易创建圆角。
在 CSS3 中 border-radius 属性被用于创建圆角：

div
{
border:2px solid;
border-radius:25px;
}

在这里插入图片描述

2、CSS3 盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影:

div
{
box-shadow: 10px 10px 5px #888888;
}

在这里插入图片描述

3、CSS3 边界图片

CSS3 的 border-image 属性，你可以使用图像创建一个边框：

border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：
在 div 中使用图片创建边框:

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

注意: Internet Explorer 不支持 border-image 属性。
在这里插入图片描述

**CSS3 圆角 border-radius **

1、浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。

属性ChromeSafariFirefoxOperaIE
border-radius5.0
4.0 -webkit-		5.0
3.1 -webkit-		4.0
3.0 -moz-		10.59.0

2、CSS3 border-radius 属性

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

以下为三个实例：

  1. 指定背景颜色的元素圆角：
{
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

在这里插入图片描述

  1. 指定边框的元素圆角:
{
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;  
}

在这里插入图片描述

  1. 指定背景图片的元素圆角:
{
    border-radius: 25px;
    background: url(http://doc.feizhiyi.com/Public/Uploads/2019-07-23/5d36b52d6a783.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px;  
}

在这里插入图片描述

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：

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

以下为三个实例:

  1. 四个值 - border-radius: 15px 50px 30px 5px:
{
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

在这里插入图片描述

  1. 三个值 - border-radius: 15px 50px 30px:
{
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

在这里插入图片描述

  1. 两个值 - border-radius: 15px 50px:
{
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

在这里插入图片描述

还可以创建椭圆边角:

1、椭圆边框 - border-radius: 50px/15px:
在这里插入图片描述

    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;

2、 椭圆边框 - border-radius: 15px/50px:
在这里插入图片描述

    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;

3、椭圆边框 - border-radius: 50%:
在这里插入图片描述

    border-radius: 50%;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;

CSS3 背景

CSS3中包含几个新的背景属性，提供更大背景元素控制。
在本章将了解以下背景属性：

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

1、浏览器支持

属性ChromeIEFirefoxSafariOpera
background-image
(with multiple backgrounds)		4.09.03.63.111.5
background-size4.0
1.0 -webkit-		9.04.0
3.6 -moz-		4.1
3.0 -webkit-		10.5
10.0 -o-
background-origin1.09.04.03.010.5
background-clip4.09.04.03.010.5

2.1、CSS3 background-image属性

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

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

 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}
{
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

在这里插入图片描述

2.2、CSS3 background-size 属性

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

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

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

重置背景图像：
div
{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}
伸展背景图像完全填充内容区域：
div
{
    background:url(img_flwr.gif);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

2.3、CSS3的background-Origin属性

background-Origin属性指定了背景图像的位置区域。

content-box, padding-box,和 border-box区域内可以放置背景图像。
在这里插入图片描述

2.4、CSS3 background-clip属性

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

CSS3 渐变（Gradients）

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

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

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

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

1、浏览器支持

属性ChromeIEFirefoxSafariOpera
linear-gradient26.0
10.0 -webkit-		10.016.0
3.6 -moz-		6.1
5.1 -webkit-		12.1
11.1 -o-
radial-gradient26.0
10.0 -webkit-		10.016.0
3.6 -moz-		6.1
5.1 -webkit-		12.1
11.6 -o-
repeating-linear-gradient26.0
10.0 -webkit-		10.016.0
3.6 -moz-		6.1
5.1 -webkit-		12.1
11.1 -o-
repeating-radial-gradient26.0
10.0 -webkit-		10.016.0
3.6 -moz-		6.1
5.1 -webkit-		12.1
11.6 -o-

2、CSS3 线性渐变

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

background: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从上到下（默认情况下）
在这里插入图片描述

height: 200px;   
background: -webkit-linear-gradient(red,yellow,green); /* Safari 5.1 - 6.0 */    
background: -o-linear-gradient(red,yellow,green); /* Opera 11.1 - 12.0 */   
background: -moz-linear-gradient(red,yellow,green); /* Firefox 3.6 - 15 */    
background: linear-gradient(red,yellow,green); /* 标准的语法（必须放在最后） */

线性渐变 - 从左到右
在这里插入图片描述

height: 200px;   
background: -webkit-linear-gradient(left, red,yellow,green); /* Safari 5.1 - 6.0 */    
background: -o-linear-gradient(left, red,yellow,green); /* Opera 11.1 - 12.0 */   
background: -moz-linear-gradient(left, red,yellow,green); /* Firefox 3.6 - 15 */    
background: linear-gradient(left, red,yellow,green); /* 标准的语法（必须放在最后） */

线性渐变 - 对角
在这里插入图片描述

    height: 200px;
    background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */

3、使用角度

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

语法

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

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

在这里插入图片描述

 {
    height: 100px;
    background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(0deg, red, blue); /* 标准的语法（必须放在最后） */
}

{
    height: 100px;
    background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(90deg, red, blue); /* 标准的语法（必须放在最后） */
}

 {
    height: 100px;
    background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(180deg, red, blue); /* 标准的语法（必须放在最后） */
}

 {
    height: 100px;
    background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(-90deg, red, blue); /* 标准的语法（必须放在最后） */
}

4、使用多个颜色结点

下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：

 {
  /* Safari 5.1 - 6.0 */
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* Opera 11.1 - 12.0 */
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* Firefox 3.6 - 15 */
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* 标准的语法 */
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

在这里插入图片描述
渐变背景

5、使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

{
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}

在这里插入图片描述

6、重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

{
    height: 200px;
    background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
    background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
    background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法（必须放在最后） */
}

在这里插入图片描述

7、CSS3 径向渐变

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

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

语法

background: radial-gradient(center, shape size, start-color, ..., last-color);

径向渐变 - 颜色结点均匀分布（默认情况下）
在这里插入图片描述

{
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red,yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */
}

径向渐变 - 颜色结点不均匀分布
在这里插入图片描述

{
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red 5%,yellow 15%, green 50%); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red 5%,yellow 15%, green 50%); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red 5%,yellow 15%, green 50%); /* Firefox 3.6 - 15 */
    background: radial-gradient(red 5%,yellow 15%, green 50%); /* 标准的语法（必须放在最后） */
}

8、设置形状

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

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

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

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

10、重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

CSS3 文本效果

CSS3中包含几个新的文本特征。
在本章中您将了解以下文本属性：

  • text-shadow
  • box-shadow
  • text-overflow
  • word-wrap
  • word-break

1、浏览器支持

属性ChromeIEFirefoxSafariOpera
text-shadow4.010.03.54.09.5
box-shadow1.0
4.0 -webkit-		9.04.0
3.5 -moz-		5.1
3.1 -webkit-		10.5
text-overflow4.06.07.03.111.0
9.0 -o-
word-wrap23.05.53.56.112.1
word-break4.05.515.03.115.0

2、CSS3 的文本阴影

CSS3 中，text-shadow属性适用于文本阴影。
在这里插入图片描述
您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：

{
    text-shadow: 5px 5px 5px #FF0000;
}

3、CSS3 box-shadow属性

CSS3 中 CSS3 box-shadow 属性适用于盒子阴影
在这里插入图片描述

{
    box-shadow: 10px 10px 5px #888888;
}

4、CSS3 Text Overflow属性

CSS3文本溢出属性指定应向用户如何显示溢出内容

“text-overflow: >>”(只在 Firefox 浏览器下有效):

text-overflow:ellipsis
text-overflow:clip
text-overflow: >>

5、CSS3的换行

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

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

word-wrap:break-word;

6、CSS3 单词拆分换行

CSS3 单词拆分换行属性指定换行规则：

 {
    word-break: keep-all;
}
 
 {
    word-break: break-all;
}

新文本属性

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

CSS3 字体

1、CSS3 @font-face 规则

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

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

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

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

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

2、浏览器支持

属性ChromeIEFirefoxSafariOpera
@font-face4.09.03.53.210.0

Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.

Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。

Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.

Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.
注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

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

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

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

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
 
div
{
    font-family:myFirstFont;
}
</style>

CSS3 2D 转换

CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸

1、它是如何工作？

转换的效果是让某个元素改变形状，大小和位置。

您可以使用 2D 或 3D 转换来转换您的元素。

2、浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性ChromeIEFirefoxSafariOpera
transform36.0
4.0 -webkit-		10.0
9.0 -ms-		16.0
3.5 -moz-		3.2 -webkit-23.0
15.0 -webkit-
12.1
10.5 -o-
transform-origin
(two-value syntax)		36.0
4.0 -webkit-		10.0
9.0 -ms-		16.0
3.5 -moz-		3.2 -webkit-23.0
15.0 -webkit-
12.1
10.5 -o-

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意： Internet Explorer 9 要求前缀 -ms- 版本.

3.1、translate() 方法

在这里插入图片描述
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

div
{
transform: translate(10px,-50px);
-ms-transform: translate(10px,-50px); /* IE 9 */
-webkit-transform: translate(10px,-50px); /* Safari and Chrome */
}

translate值（10px，-50px）是从左边元素移动50个像素，并从顶部移动-50像素。

3.2、rotate() 方法

在这里插入图片描述

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

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

rotate值（30deg）元素顺时针旋转30度。

3.3、scale() 方法

在这里插入图片描述
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

{
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
}

scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

3.4、skew() 方法

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

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

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

在这里插入图片描述

{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。

3.5、matrix() 方法

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

在这里插入图片描述

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

{
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 */
}

4、转换属性

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

函数描述
transform向元素应用 2D 或 3D 转换
transform-origin允许你改变被转换元素的位置

5、2D 转换方法

函数描述
matrix(n,n,n,n,n,n)定义 2D 转换，使用 6 个值的矩阵。
translate(x,y)定义 2D 转化，沿着 X 和 Y 轴移动元素。
translateX(n)定义 3D 转化，仅使用用于 X 轴的值。
translateY(n)定义 3D 转化，仅使用用于 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 3D 转换

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

在本章中，您将学到其中的一些 3D 转换方法：

  • rotateX()
  • rotateY()

1、浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性ChromeIEFirefoxSafariOpera
transform36.0
12.0 -webkit-		10.0
9.0 -ms-		16.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
transform-origin
(two-value syntax)		36.0
12.0 -webkit-		10.0
9.0 -ms-		16.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
transform-style36.0
12.0 -webkit-		11.0
9.0 -ms-		16.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
perspective36.0
12.0 -webkit-		10.0
9.0 -ms-		16.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
perspective-origin36.0
12.0 -webkit-		10.0
9.0 -ms-		16.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-
backface-visibility36.0
12.0 -webkit-		10.0
9.0 -ms-		16.0
10.0 -moz-		4.0 -webkit-23.0
15.0 -webkit-

2.1、rotateX() 方法

注意: Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.

在这里插入图片描述

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

{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

2.2、rotateY() 方法

在这里插入图片描述

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}

3、转换属性

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

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

4、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 过渡 当前博客不支持效果 感兴趣可复制代码查看

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。用鼠标移过下面的元素：

1、浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性ChromeIEFirefoxSafariOpera
transition26.0
4.0 -webkit-		10.016.0
4.0 -moz-		6.1
3.1 -webkit-		12.1
10.5 -o-
transition-delay26.0
4.0 -webkit-		10.016.0
4.0 -moz-		6.1
3.1 -webkit-		12.1
10.5 -o-
transition-duration26.0
4.0 -webkit-		10.016.0
4.0 -moz-		6.1
3.1 -webkit-		12.1
10.5 -o-
transition-property26.0
4.0 -webkit-		10.016.0
4.0 -moz-		6.1
3.1 -webkit-		12.1
10.5 -o-
transition-timing-function26.0
4.0 -webkit-		10.016.0
4.0 -moz-		6.1
3.1 -webkit-		12.1
10.5 -o-

2、工作原理

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

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

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

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

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

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

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：


实例
规定当鼠标指针悬浮(:hover)于 <div>元素上时：

div.ss1{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
	-webkit-transition:width 2s; /* Safari */
}
div.ss1:hover{
	width:300px;
}

注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。

注意： 当鼠标光标移动到该元素时，它逐渐改变它原有样式

多项改变

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


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

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


<style> 
div.ss2{
	width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s, height 2s, transform 2s;
}
div.ss2:hover{
	width: 200px;
  height: 200px;
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}
</style>
<div class="ss2">鼠标移动到 div 元素上，查看过渡效果</div>

过渡属性

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

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

CSS3 动画

CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。

1、CSS3 @keyframes 规则

要创建CSS3动画，你将不得不了解@keyframes规则。

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

2、浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性ChromeIEFirefoxSafariOpera
@keyframes43.0
4.0 -webkit-		10.016.0
5.0 -moz-		9.0
4.0 -webkit-		30.0
15.0 -webkit-
12.0 -o-
animation43.0
4.0 -webkit-		10.016.0
5.0 -moz-		9.0
4.0 -webkit-		30.0
15.0 -webkit-
12.0 -o-

3、CSS3的动画属性

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

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

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

实例
把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

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

4、CSS3的动画原理

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

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

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

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

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


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

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
<style> 
div.ss3
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

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

<div class="ss3"></div>

5、CSS3的动画属性

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

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

下面例子设置所有动画属性：


实例
运行myfirst动画，设置所有的属性：

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

下列代码同样实现上述效果


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

CSS3 多列

CSS3 可以将文本内容设计成像报纸一样的多列布局

1、浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

属性ChromeIEFirefoxSafariOpera
column-count4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit-
11.1
column-gap4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit-
11.1
column-rule4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit-
11.1
column-rule-color4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit-
11.1
column-rule-style4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit-
11.1
column-rule-width4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit-
11.1
column-width4.0 -webkit-10.02.0 -moz-3.1 -webkit-15.0 -webkit-
11.1

2、CSS3 多列属性

下表列出了所有 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 用户界面

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

在本章中，您将了解以下的用户界面属性：

  • resize
  • box-sizing
  • outline-offset

1、浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性ChromeIEFirefoxSafariOpera
resize4.0 -webkit-不兼容5.0
4.0 -moz-		4.015.0
resize10.0
4.0 -webkit-		8.029.0
2.0 -moz-		5.1
3.1 -webkit-		9.5
resize4.0 -webkit-不兼容5.0
4.0 -moz-		4.09.5

2.1、CSS3 调整尺寸(Resizing)

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

这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中)


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

div
{
    resize:both;
    overflow:auto;
}

2.2、CSS3 方框大小调整(Box Sizing)

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


规定两个并排的带边框方框：

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

2.3、CSS3 外形修饰（outline-offset ）

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：

  • 轮廓不占用空间
  • 轮廓可能是非矩形

这个 div 在边框之外 15 像素处有一个轮廓。


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

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

3、新的用户界面特性

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

CSS 图片

1、圆角图片


圆角图片:
img {
    border-radius: 8px;
}


椭圆形图片:
img {
    border-radius: 50%;
}

2、缩略图

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

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

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

3、响应式图片

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

你可以通过重置浏览器大小查看效果:

如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

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

4、图片文本

使用定位实现

5、卡片式图片

6、图片滤镜

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

注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。

7、图片 Modal(模态)

本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。

使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。

然后，使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：


在这里插入图片描述

CSS 按钮

1、按钮颜色

使用 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 */

2、按钮大小

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

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

3、圆角按钮

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

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

4、按钮边框颜色

border 属性设置按钮边框颜色:

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

5、鼠标悬停按钮

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

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

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

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

6、按钮阴影

使用 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);
}

7、禁用按钮

使用 opacity 属性为按钮添加透明度 (看起来类似 “disabled” 属性效果)。

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

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

8、按钮宽度

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

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

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

9、按钮组

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

10、按钮动画

鼠标移动、点击添加动画效果

CSS 分页实例

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



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



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



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



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



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



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



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

CSS3 框大小

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

1、浏览器支持

格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

属性ChromeIEFirefoxSafariOpera
box-sizing10.0
4.0 -webkit-		8.029.0
2.0 -moz-		5.1
3.1 -webkit-		9.5

不使用 CSS3 box-sizing 属性

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

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

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

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

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

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

使用这种方式如果想要获得较小的那个框且包含内边距，就不得不考虑到边框和内边距的宽度。

CSS3 的 box-sizing 属性很好的解决了这个问题。

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

从结果上看 box-sizing: border-box; 效果更好，也正是很多开发人员需要的效果。

以下代码可以让所有元素以更直观的方式展示大小。很多浏览器已经支持 box-sizing: border-box; (但是并非所有 - 这就是为什么 input 和 text 元素设置了 width: 100%; 后的宽度却不一样)。

所有元素使用 box-sizing 是比较推荐的

CSS3 弹性盒子(Flex Box)

相关文档

CSS3 多媒体查询

1、CSS2 多媒体类型

@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。

例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。

但是这些多媒体类型在很多设备上支持还不够友好。

2、 CSS3 多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情，例如：

viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率
目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。

3、浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

属性ChromeIEFirefoxSafariOpera
box-sizing21.09.03.54.09.0

4、多媒体查询语法

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {
    CSS 代码...;
}

如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。


除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。

  • not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。

  • only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

  • all: 所有设备，这个应该经常看到。

你也可以在不同的媒体上使用不同的样式文件：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

5、CSS3 多媒体类型

值描述
all用于所有多媒体类型设备
print用于打印机
screen用于电脑屏幕，平板，智能手机等。
speech用于屏幕阅读器

6、多媒体查询简单实例

使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。

以下实例中在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色:

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
wxl_1501115
关注
专栏目录
HTML5+CSS3入门基础知识
12-29
HTML5+CSS3入门基础知识 HTML5 是下一代的 HTML 标准，旨在提高网页的可读性、可访问性和可维护性。CSS3 是最新的样式表语言标准，旨在提高网页的视觉效果和用户体验。本节课程将介绍 HTML5 和 CSS3 的基础知识，...
CSS3基础知识学习 - 思维导图
08-08
前端开发CSS知识整理
CSS3 基础知识
诸葛苍穹
12-13 390
1.边框 1.1 圆角 border-radius:5px 0 0 5px; 1.2 阴影 box-shadow:2px 3px 4px 5px rgba(0,0,0,0.5);(水平、垂直、模糊、扩展) box-shadow:inset 1px 2px 3px 4px #fff;(inset 内阴影) 1.3 边框图像 border-image
css3的基础知识
weixin_30252155的博客
06-22 81
transfrom的应用： 1.旋转：transform: rotate(30deg)； 2.阴影效果：box-shadow: 10px 10px 5px #888888； 3.鼠标移入放大：transform: scale(2,2)； 放慢变化的时间效果： transition: transform(想要实现的属性) 6s， 内联与块状...
CSS | 响应式布局之媒体查询(media-query)详解
最新发布
青春木鱼的博客
10-03 2130
media query功能：这种机制允许设置在css样式中添加media query表达式，这种表达式不仅可以对媒体类型进行匹配，也可以对媒体分辨率、色深等各种细节进行匹配，因此可以针对不同类型，不同参数细节的媒体设计提供精确控制。语法：@media 设备名 only（选取条件） not （选取条件） and （设备选取条件） ， 设备二｛sRules｝
CSS3基础知识
AO_AEO的博客
07-07 348
1、什么是CSS3 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点＋难点) 美化网页(文字，阴影，超链接，列表，渐变…) 盒子模型 浮动 定位 网页动画（特效） 1.1、什么是CSS Cascading Style Sheet 层叠级联样式表 CSS ： 表现（美化网页） 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动 1.2、发展史 CSS1.0 CSS2.0 DIV（块）+CSS，HTML与CSS 结构分离的思想 CSS2.1 浮动定
css3基础知识点
gsblyy的博客
02-12 236
从html开始重新复习了一遍，今天主要复习一下css3，整理一些个人觉得常用的知识点，陆续会更新js，jq，vue，react等 CSS3 是最新的 CSS 标准。 CSS3 边框 border-radius：用于创建圆角 box-shadow：用来添加阴影 border-image：使用图片创建边框 CSS3 背景 background-image：添加背景图片 background-size：指定背景图像的大小 background-origin：指定了背景图像的位置区域 b...
CSS3的基础知识点
小焊猪 - web前端
07-16 433
   1、CSS背景 （1）、background-size 属性 background-size 属性规定背景图片的尺寸，同时适用与字体图标方面的适用（主要在移动端用到较多）。 在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。 您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相...
html5 css3 简单基础知识笔记
01-27
html5 css3 简单基础知识笔记
html&css入门基础知识点.pdf
10-04
HTML和CSS基础知识点 HTML是用来描述网页的一种语言，指的是超文本标记语言（Hyper Text Markup Language），它不是一种编程语言，而是一种标记语言。HTML使用标记标签来描述网页的结构和内容。 标记语言是一套...
CSS，CSS3基础
11-05
**CSS与CSS3基础知识概述** CSS（层叠样式表）是一种用于描述网页及应用程序用户界面外观和表现的样式语言。它是Web开发中的关键技术之一，与HTML或XML（包括SVG、MathML等）配合使用，为网页添加样式和布局。CSS3...
CSS3基础知识总结
zsl15039718107的博客
04-10 325
CSS3中有哪些新特性？ 1. CSS3边框 边框圆角（border-radius） 阴影（box-shadow） 图片绘制边框（box-image） 2. CSS3背景 背景图片大小（background-size） 背景图片的定位区域（background-origin） 3. CSS3文本效果 文本阴影（text-shadow） 允许对文本进行换行（word-wrap） 4. C...
CSS3基础知识通俗易懂
qq_45366447的博客
01-27 271
一、概述 如何学习 CSS是什么 CSS怎么用（快速入门） CSS选择器（重点+难点） 美化网页（文字、阴影、超链接、列表、渐变） 盒子模型 浮动 定位 网页动画（特效效果） 1、什么是CSS Cascading Style Sheet层叠级联样式表 CSS： 表现（美化网页） 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动 css的优势： 内容与表现分离 网页结构表现统一， 可以实现复用 样式十分丰富 建议使用独立于html的css文件 利用SEO，容易被搜索引擎收录 2、快速入门 H
CSS3--基础知识点总结
m0_63341919的博客
11-14 336
一、 CSS3 边框 圆角：border-radius 如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。 但是，如果你要在四个角上一一指定，可以使用以下规则： 1.四个值: 依次为左上，右上 ，右下 ，左下 2.三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角 3.两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角 4.一个值: 四个圆角值相同 盒阴影：box-shadow 边界图片：border-shadow 二、CSS3 背景
HTML5+CSS3学习笔记（二）CSS3基础知识
Lindsay_jie的博客
03-04 397
一. 基础认知 1.1 CSS引入方式 1.1.1 内嵌式：CSS写在style标签中 提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中 1.1.2 外联式：CSS写在一个单独的.CSS文件中 提示：需要通过link标签在网页中引入 <link rel="stylesheet" href=" "></link> 1.1.3 行内式：CSS写在标签的style属性中，不推荐使用 二. 基础选择器 1.1 标签选择器：以标签命名的选择器 结构：标签名{
CSS3(入门)
热爱编程、热爱生活、热爱探索
02-19 8809
目录一、CSS3基本概念和作用 一、CSS3基本概念和作用 Html5是网页的结构，css3是网页的表现（美化），javaScript是网页的交互。 菜鸟教程（学习的工具网站） 概念：CSS又叫层叠样式表( Cascading Style Sheets )是一种用来表现HTML或XML等文件样式的计算机语言，3是版本号。CSS于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 作用：美化网页（字体
CSS3 新特性探索：让你的网页设计更加炫酷
m0_73442777的博客
06-17 568
探索CSS3新特性，为你的网页设计带来前所未有的魅力！在这篇文章中，我们将带你了解CSS3的最新功能和技术，包括强大的选择器、灵活的布局模块、动画效果和过渡、渐变和阴影效果、响应式设计以及更多。你将学会如何利用这些新特性创建出令人惊叹的用户界面，实现动态和交互式的效果，以及为不同设备和屏幕尺寸进行优化。无论你是新手还是有经验的开发者，这篇文章都将帮助你深入了解CSS3的新特性，并启发你在网页设计中展现无限创意。准备好探索CSS3的奇妙世界了吗？让我们一起领略CSS3的魅力，为你的网页注入全新的活力！
今天我们简单的聊聊CSS3（1）
kevin661996的博客
08-09 130
今天我们来简单说说前端的3架马车之一的CSS。 CSS全称Cascading Style Sheets<层叠样式表> 如果说HTML是来给房子打地基的话，CSS就是初步装修。 也可以说是HTML决定了我们网页页面的结构，那CSS就是来定义HTML的样式，使页面更好看。 ...
HTML5和CSS3基础知识详解
三、CSS3基础知识 在CSS3中，我们可以使用多种样式来美化网页，包括： * 文字阴影：可以使用text-shadow属性来设置文字阴影，语法为：text-shadow:h-shadow v-shadow blur color * 字体设置：可以使用font-family...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值