学习 CSS3

关注爱学习公众号
扫码手机阅读更方便

栏目

推荐阅读

CSS3 多媒体查询实例
CSS3 多媒体查询实例本章节我们将为大家演示一些多媒体查询实例。开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下：实例 1 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;style&gt;ul {&nbsp;&nbsp;&nbs
CSS3 按钮
.w3-ripple{ position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-tran
CSS3 字体
CSS3 字体 CSS3 @font-face 规则使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。您“自己的”的字体是在 CSS3 @
CSS3 圆角
#rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007;
CSS3 渐变
CSS3 渐变（Gradients）渐变效果 CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gra
CSS3 文本效果
#textshadow { text-shadow: 5px 5px 5px #FF0000; font-size:30px; } #wordwrap { width:11em; border:1px solid #000000; word-wrap:break-word; } #normal { width:11em; border:1
CSS3 2D 转换
CSS3 2D 转换 #rotate2D,#rotate3D { width:80px; height:70px; color:white; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin-righ
CSS3 过渡
.animated_div { width:60px; height:40px; background:#92B901; color:#ffffff; position:absolute; font-weight:bold; font-size:15px; padding:10px; float:left; margin:5px; -webkit-transition:-webkit-transf
CSS3 多媒体查询
CSS3 多媒体查询 CSS2 多媒体类型 @media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。 CSS3 多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想：取代了查找设备的类型，CSS3 根据设置
CSS3 背景
CSS3 背景 CSS3 背景 CSS3 中包含几个新的背景属性，提供更大背景元素控制。在本章您将了解以下背景属性： background-image background-size background-origin background-clip 您还将学习如何使用多重背景图像。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -m

CSS3 框大小

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

浏览器支持

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

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

属性
box-sizing	10.04.0 -webkit-	8.0	29.02.0 -moz-	5.13.1 -webkit-	9.5

不使用 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 属性很好的解决了这个问题。

使用 CSS3 box-sizing 属性

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

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

两个 div 现在是一样大小的!

爱学习网教程!

以下是两个 <div> 元素添加 box-sizing: border-box; 属性的简单实例。


实例

	.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 是比较推荐的：


实例

	* {    box-sizing: border-box;}