CSS3--用户界面

来源:互联网 发布:饥荒 存档 mac steam 编辑:程序博客网 时间:2024/06/06 15:49

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

1. CSS3 调整尺寸(Resizing)
CSS3中,resize属性指定一个元素是否应该由用户去调整大小。

div{border:2px solid;padding:10px 40px; width:300px;resize:both;overflow:auto;}

2. CSS3 方框大小调整(Box Sizing)
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

div.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */width:50%;border:1em solid red;float:left;}

3. CSS3 外形修饰(outline-offset )
outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同:

  • 轮廓不占用空间
  • 轮廓可能是非矩形
div{margin:20px;width:150px; padding:10px;height:70px;border:2px solid black;outline:2px solid red;outline-offset:15px;} 

4. 新的用户界面特性

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

0 0
原创粉丝点击