发布日期:2015-11-09 16:31 来源: 标签: 网页技术 CSS3教程 CSS3用户界面Resizing outline-offset及box-sizing
在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。在本章中,您将了解以下的用户界面属性:resize、box-sizing、outline-offset。下面我们就做一下具体讲解,希望大家多多支持中国站长网络学院。

CSS3 用户界面

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

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

  • resize
  • box-sizing
  • outline-offset

浏览器支持


Firefox、Chrome 以及 Safari 支持 resize 属性。

Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。

所有主流浏览器都支持 outline-offset 属性,除了 Internet Explorer。


CSS3 调整尺寸(Resizing)

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

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

CSS代码如下:

OperaSafariChromeFirefoxInternet Explorer

实例

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

div
{
resize:both;
overflow:auto;
}
运行效果:


CSS3 方框大小调整(Box Sizing)

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

OperaSafariChromeFirefoxInternet Explorer

实例

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

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


CSS3 外形修饰(outline-offset )

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

轮廓与边框有两点不同:

  • 轮廓不占用空间
  • 轮廓可能是非矩形
这个 div 在边框之外 15 像素处有一个轮廓。

The CSS code is as follows:

OperaSafariChromeFirefoxInternet Explorer

实例

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

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
运行效果:


新的用户界面特性


相关评论

专题信息
    CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,也就是层叠样式表。层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。CSS3是CSS的升级版,本教程会一起介绍。