CSS3 用户界面

原创 2013年12月04日 16:13:12

CSS3 用户界面

在 CSS3 中,新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

浏览器支持


新的用户界面属性

下面的表格列出了所有的转换属性:

属性 描述 CSS
appearance 允许您将元素设置为标准用户界面元素的外观 3
box-sizing 允许您以确切的方式定义适应某个区域的具体内容。 3
icon 为创作者提供使用图标化等价物来设置元素样式的能力。 3
nav-down 规定在使用 arrow-down 导航键时向何处导航。 3
nav-index 设置元素的 tab 键控制次序。 3
nav-left 规定在使用 arrow-left 导航键时向何处导航。 3
nav-right 规定在使用 arrow-right 导航键时向何处导航。 3
nav-up 规定在使用 arrow-up 导航键时向何处导航。 3
outline-offset 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 3
resize 规定是否可由用户对元素的尺寸进行调整。 3

实验代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.resize{
	width:300px;
	padding:10px 40px;
	border:1px solid #F00;
	resize:both;
	overflow:auto;
}

.container{
	width:30em;
	border:2em solid #00F;
}
.box{
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	width:50%;
	border:1em solid #F00;
	float:left;
}
.outline{
	width:150px;
	height:70px;
	margin:20px;
	padding:10px;
	border:2px solid #F00;
	outline:#000 dashed 2px;
	outline-offset:15px;
}

</style>
<title>无标题文档</title>
</head>

<body>
<div class="resize">
	resize 属性规定是否可由用户调整元素尺寸。但不支持ie和opera。
    resize:horizontal;横向调整文本框的大小。
    resize:both;上下左右的调整。
    resize:vertical;上下的调整。
</div>
<br />
<p>box-sizing的效果</p>
<div class="container">	
	<div class="box">这个 div 占据左半部分。</div>
    <div class="box">这个 div 占据右半部分。</div>
</div>
<br />
<div class="outline">
	outline-offset的效果。
	这个 div 在边框边缘之外 15 像素处有一个轮廓。
</div>

</body>
</html>

效果图:


版权声明:原创文章,请标明出处~~~

<css3>用户界面

appearance: normal 将元素呈现为常规元素。 icon 将元素呈现为图标(小图片)。 window 将...
  • q869429064
  • q869429064
  • 2016年05月18日 16:41
  • 120

CSS3 用户界面

1、CSS3 调整尺寸(Resizing)    CSS3中,resize属性指定一个元素是否应该由用户去调整大小。这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, ...
  • qq_27626333
  • qq_27626333
  • 2016年07月07日 19:23
  • 365

css3用户界面

appearance appearance 属性允许使元素看上去像标准的用户界面元素。比如给元素div设置: div { appearance:button; -moz-appe...
  • onepunchmen00
  • onepunchmen00
  • 2017年11月27日 17:19
  • 13

CSS3用户界面

用户界面 CSS3规范新增了UI模块,该模块用来控制与用户界面相关效果的呈现方式,详细资料参阅http://www.w3.org/TR/css3-ui/。 CSS3对盒模型进行了改善,定义了box...
  • lipeishenshen
  • lipeishenshen
  • 2016年02月19日 10:54
  • 450

css3学习之用户界面

我们使用css3的新属性,可以自由的控制页面当中某个元素的大小,可以设置外边框以突出重点,可以轻松的实现报纸版面的排列效果(多列),可以重定义盒子模型的呈现形式。         1、css3多列 通...
  • zzzkk2009
  • zzzkk2009
  • 2015年10月08日 21:08
  • 217

CSS3 用户界面

CSS3 用户界面 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。 在本章中,您将了解以下的用户界面属性: resize box-sizing ...
  • adolph_yang
  • adolph_yang
  • 2017年12月02日 18:28
  • 54

CSS3多列和用户界面

CSS3 多列 创建多个列来对文本进行布局 - 就像报纸那样 column-count:3;把 div 元素中的文本分隔为三列: column-gap:70px; 规定列之间的间隔 column-ru...
  • cxd1008
  • cxd1008
  • 2017年02月07日 12:25
  • 59

运用HTML5+CSS3做的登录页面

本文转载自:http://chenjinfei.blog.51cto.com/2965201/774865
  • li365
  • li365
  • 2014年11月04日 17:32
  • 2101

简单h5+css3登录界面

Document body{ background-color: -moz-linear-gradient( top,#ccc,#000); } #login{ box-shadow...
  • Grit_ICPC
  • Grit_ICPC
  • 2016年11月14日 20:01
  • 1899

20个免费开源CSS3用户界面工具包

20个免费开源CSS3用户界面工具包 作者 jopen 2013-07-17 22:36:22 CSS3设计的强大为构建自定义网站界面提供了独特的开发趋势。它现在比以往任何...
  • maikforever
  • maikforever
  • 2013年07月18日 11:58
  • 1071
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3 用户界面
举报原因:
原因补充:

(最多只允许输入30个字)