学习 CSS3

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

栏目

推荐阅读

CSS3 多媒体查询实例
CSS3 多媒体查询实例本章节我们将为大家演示一些多媒体查询实例。开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下：实例 1 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;style&gt;ul {&nbsp;&nbsp;&nbs
CSS3 弹性盒子
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。浏览器支持表格中的数字表示支持该属性的第一个浏览器
CSS3 分页
CSS 分页实例 .article-body ul li { background-image:none} .pagination,.pagination2,.pagination3 { display: inline-block; padding: 0; margin: 8px 0; } .pagination li,.pagination2 li,.pagination3 li
CSS3 圆角
#rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007;
CSS3 多媒体查询
CSS3 多媒体查询 CSS2 多媒体类型 @media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。 CSS3 多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想：取代了查找设备的类型，CSS3 根据设置
CSS3 动画
[mystyle] #animated_div { width:76px; height:47px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s 1; -moz-animation:a
CSS3 图片
CSS 图片本章节将为大家介绍如何使用 CSS 来布局图片。圆角图片实例圆角图片: img {&nbsp;&nbsp;&nbsp; border-radius: 8px;} 尝试一下 » 实例椭圆形图片: img {&nbsp;&nbsp;&nbsp; border-radius: 50%;} 尝试一下 » 缩
CSS3 边框
CSS3 边框 CSS3 边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。在本章中，您将了解以下的边框属性： border-radius box-shadow border-image CSS3 圆角在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。在 CSS3 中，很容易创建圆角。在 CSS3
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 多列
CSS3 多列 CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例: .newspaper { border:1px black solid; padding: 15px; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */

CSS3 用户界面

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

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

resize
box-sizing
outline-offset

浏览器支持

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

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

属性
resize	4.0	不兼容	5.04.0 -moz-	4.0	15.0
box-sizing	10.04.0 -webkit-	8.0	29.02.0 -moz-	5.13.1 -webkit-	9.5
outline-offset	4.0	不兼容	5.04.0 -moz-	4.0	9.5

CSS3 调整尺寸(Resizing)

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

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

CSS代码如下：


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

div
{
    resize:both;
    overflow:auto;
}

CSS3 方框大小调整(Box Sizing)

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


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

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

CSS3 外形修饰（outline-offset ）

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

轮廓与边框有两点不同：

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

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

CSS 代码如下:


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

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

新的用户界面特性

属性	说明	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