字段集中的 HTML5 图例的 CSS3

Question

Can you please suggest CSS to get effect as quoted below (using CSS3 gradient & borders) ?您能否建议 CSS 获得如下引用的效果（使用 CSS3 渐变和边框）？

在此处输入图片说明

Current version of HTML is mentioned below:下面提到了当前版本的 HTML：

<section style="margin: 10px;">
<fieldset style="border-radius: 5px; padding: 5px; min-height:150px;">
<legend><b> My Statistics </b> </legend>
<label> <br/> </label>
<label> <br/> </label>
</fieldset>

Answer 1

 fieldset { font-family: sans-serif; border: 5px solid #1F497D; background: #ddd; border-radius: 5px; padding: 15px; } fieldset legend { background: #1F497D; color: #fff; padding: 5px 10px ; font-size: 32px; border-radius: 5px; box-shadow: 0 0 0 5px #ddd; margin-left: 20px; }

 <section style="margin: 10px;"> <fieldset style="min-height:100px;"> <legend><b> My Statistics </b> </legend> <label> <br/> </label> <label> <br/> </label> </fieldset>

( http://jsfiddle.net/ESkRt/1/ ) ( http://jsfiddle.net/ESkRt/1/ )

Answer 2

THERE YOU GO :你去那里：

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <section style="margin: 10px;"> <fieldset style="border-radius: 5px; padding: 5px; min-height:150px; border:8px solid #1f497d; background-color:#eeece1;"> <legend style=" margin-left:20px;background-color:#1f497d; padding-left:10px; padding-top:5px; padding-right:120px; padding-bottom:5px; ; color:white; border-radius:15px; border:8px solid #eeece1; font-size:40px;" ><b> My Statistics </b> </legend> <label> <br/> </label> <label> <br/> </label> </fieldset> </body> </html>

字段集中的 HTML5 图例的 CSS3

问题描述

2 个解决方案

解决方案1
51 已采纳 2013-11-04 19:00:57

解决方案2
6 2013-11-04 18:55:32

字段集中的 HTML5 图例的 CSS3

问题描述

2 个解决方案

解决方案1 51 已采纳 2013-11-04 19:00:57

解决方案2 6 2013-11-04 18:55:32

解决方案1
51 已采纳 2013-11-04 19:00:57

解决方案2
6 2013-11-04 18:55:32