您的位置：首页 > Web前端 > HTML5

HTML5结构标签、border-radius、box-shadow与text-shadow

2015-03-24 01:14 651 查看

一. border-radius 使用

border-radius用来设置圆角。语法：border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个 radius 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。其遵循相对原则。

二.box-shadow与text-shadow #

box-shadow和text-shadow分别为块和文字设置阴影；语法：text-shadow/box-shadow: x-shadow y-shadow blur color;

x为x方向的阴影，y为y方向的阴影，blur为其阴影的模糊值，color为阴影颜色。

三.HTML5的结构标签

header标签和footer标签。

header主要用于设置页面的头部，也可设置文档的头部等…；footer用来设置页面的底部，也可用于文档的脚部等…

例如：

<body><header></header><div id='main'></div><footer></footer><body>

section标签。

此标签用于章节、页眉、页脚或文档中的其他部分。例如：

<section><h1>这是内容<h1></section>

nav标签。

标签定义导航部分。例如：

<nav><a>首页</a><a>军事</a><a>国内</a></nav>

4.* article标签。*

为特殊的section标签。它代表独立的完整的相关内容块，可以包含文章的标题块。例如：

<article><a href="http://www.apple.com">Safari 5 released</a><br />7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC, Apple announced the release of Safari 5 for Windows and Mac......</article>

aside标签。

标签为与主内容相关，可以为广告、侧边栏，引用等。例如：

<p>这是内容.</p><aside><h4>标题r</h4>广告区</aside>

menu标签。

定义菜单列表，例如

<menu><input type='text'></menu>

figure标签。

标签规定独立的内容，如图像、代码、照片等，内容与主内容相关，但不影响文档流。如

<figure><p>黄浦江上的的卢浦大桥</p><img src="shanghai_lupu_bridge.jpg" width="350" height="234" /></figure>

dialog标签。

对话标签。如

<dialog><dt>老师</dt><dd>2+2 等于？</dd><dt>学生</dt><dd>4</dd><老师</dt><dd>答对了！</dd></dialog>

。要与dt标签合用。

meter标签。

用于定于度量衡。例如：

<meter value="9" min="0" max="10">/</meter><br><meter value="0.6">60%</meter>

。value为其进度值，min为最小值，max为最大值。

progress标签。

定义进度条

<progress max=10 min=0 value=4></progress>

。和meter一样。

datalist标签。

与input合用该标签，定义选项列表。例如

<input id="myCar" list="cars" /><datalist id="cars"><option value="BMW"><option value="Ford"><option value="Volvo"></datalist>

。输入文字时，会主动提示option的内容。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： lef 设置圆角 length 语法

相关文章推荐

新的分享

章节导航