小白教程
所有教程
关于
Search
172.71.223.20
172.71.223.20
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS3 用户界面”的源代码
本页内容
上一节:
CSS3_多列
下一节:
CSS_图片
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS3 用户界面}}[[Category:CSS 教程|54]] = CSS3 用户界面 = == CSS3 用户界面 == 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。 在本章中,您将了解以下的用户界面属性: * resize * box-sizing * outline-offset == 浏览器支持 == 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | resize | 4.0 | 79.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 | 15.0 | 5.04.0 -moz- | 4.0 | 9.5 |} == CSS3 调整尺寸(Resizing) == CSS3中,resize属性指定一个元素是否应该由用户去调整大小。 这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中) CSS代码如下: 由用户指定一个div元素尺寸大小: <sample title="" desc="" lang="html" hererun="1"> div { resize:both; overflow:auto; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div { border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; } </style> </head> <body> <p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p> <div>调整属性指定一个元素是否由用户可调整大小的。</div> </body> </html> </run> == CSS3 方框大小调整(Box Sizing) == box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。 规定两个并排的带边框方框: <sample title="" desc="" lang="html" hererun="1"> div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; float:left; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #example1 { box-sizing: content-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue; } #example2 { box-sizing: border-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue; } </style> </head> <body> <h1>box-sizing 属性</h1> <p>定义如何计算一个元素的总宽度和总高度,是否包含内边距和边框。</p> <h2>box-sizing: content-box (默认):</h2> <p>高度和宽度只应用于元素的内容:</p> <div id="example1">这个 div 的宽度为 300px。但完整宽度为 300px + 20px (左边框和右边框) + 60px (左边距和右边距) = 380px!</div> <h2>box-sizing: border-box:</h2> <p>高度和宽度应用于元素的所有部分: 内容、内边距和边框:</p> <div id="example2">不管如何这里的完整宽度为300px!</div> </body> </html> </run> == CSS3 外形修饰(outline-offset ) == outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 轮廓与边框有两点不同: * 轮廓不占用空间 * 轮廓可能是非矩形 这个 div 在边框之外 15 像素处有一个轮廓。 CSS 代码如下: 规定边框边缘之外 15 像素处的轮廓: <sample title="" desc="" lang="html" hererun="1"> div { border:2px solid black; outline:2px solid red; outline-offset:15px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div { margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline:2px solid red; outline-offset:15px; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p> <div>这个 div有一个轮廓边界15 px边境外的边缘。</div> </body> </html> </run> == 新的用户界面特性 == {| class="table table-striped table-hover" ! 属性 ! 说明 ! CSS |- | [[css3 pr appearance|appearance]] | 允许您使一个元素的外观像一个标准的用户界面元素 | 3 |- | [[css3 pr box sizing|box-sizing]] | 允许你以适应区域而用某种方式定义某些元素 | 3 |- | [[css3 pr icon|icon]] | 为创作者提供了将元素设置为图标等价物的能力。 | 3 |- | [[css3 pr nav down|nav-down]] | 指定在何处使用箭头向下导航键时进行导航 | 3 |- | [[css3 pr nav index|nav-index]] | 指定一个元素的Tab的顺序 | 3 |- | [[css3 pr nav left|nav-left]] | 指定在何处使用左侧的箭头导航键进行导航 | 3 |- | [[css3 pr nav right|nav-right]] | 指定在何处使用右侧的箭头导航键进行导航 | 3 |- | [[css3 pr nav up|nav-up]] | 指定在何处使用箭头向上导航键时进行导航 | 3 |- | [[css3 pr outline offset|outline-offset]] | 外轮廓修饰并绘制超出边框的边缘 | 3 |- | [[css3 pr resize|resize]] | 指定一个元素是否是由用户调整大小 | 3 |} [http://www.xiaobai.wang/css3/css3-multiple-columns.html CSS3 多列] [http://www.xiaobai.wang/css3/css3-gradients.html CSS3 渐变]
返回至“
CSS3 用户界面
”。
上一节:
CSS3_多列
下一节:
CSS_图片