fieldset标签

fieldset定义和用法：

fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

fieldset、legend都是块元素。

代码：

<style>
fieldset{width:260px;margin:10px;font-size: 12px;border:1px dotted #f0f;} legend{color: #f0f;font-size: 14px;} li{list-style: none;color:#0cc;} </style> <fieldset>  <legend>web前端开发</legend>  <ul>   <li>HTML：超文本标记语言</li>   <li>CSS：层级样式</li>   <li>JavaScript：脚本语言</li>   <li>jQuery:js插件</li>  </ul> </fieldset>

效果图（Chrome）：

注意：

该标签的属性与样式与标准的一样。但在浏览器兼容方面有些差异：在IE6+中块的边框表现为圆角；在Firefox和chrome下都是直角。FF支持CSS3，所以解决FF下的圆角问题很简单：为fieldset标签的样式加上-moz-border-radius:5px即可；chrome同理：-webkit-border-radius:5px;

现在给代码添加圆角属性：

<style>
fieldset{width:260px;margin:10px;font-size: 12px;border:1px dotted #f0f;-moz-border-radius:5px;-webkit-border-radius:5px;} legend{color: #f0f;font-size: 14px;} li{list-style: none;color:#0cc;} </style> <fieldset>    <legend>web前端开发</legend>    <ul>      <li>HTML：超文本标记语言</li>      <li>CSS：层级样式</li>      <li>JavaScript：脚本语言</li>      <li>jQuery:js插件</li>    </ul> </fieldset>

效果图（Chrome）：

转载于:https://www.cnblogs.com/phoebeyue/p/9215554.html