CSS3 per legenda HTML5 all'interno del campo

Potete suggerire CSS per ottenere l'effetto come indicato di seguito (utilizzando i bordi del gradiente CSS3 &)?CSS3 per legenda HTML5 all'interno del campo

enter image description here

L'attuale versione di HTML è menzionato qui di seguito:

<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>

fonte

2013-11-04 Pawan Mude

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/)

fonte

2013-11-04 19:00:57 darthmaim

ci si va:

<!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>

fonte

2013-11-04 18:55:32

CSS3 per legenda HTML5 all'interno del campo

risposta

Problemi correlati