Fieldset border style setting in html

Maybe you think that you can use pictures to achieve such an effect, but pictures are not only slightly larger in size, but also lacking in semantics. How to achieve this effect using xhtml+css? First, we set a box (also translated as a field) through fieldset, then set a title through a specific tag legend field title, and define corresponding styles for them to achieve this effect. Let's first learn about the fieldset box and legend field title.
HTML element fieldset box
Draws a box around the text and other elements that the field set contains.
Draws a box around the text and other elements that the field set contains.
The fieldset element is used to group elements in the form and distinguish text in the document. It behaves somewhat similarly to a window frame. fieldset is available in HTML and scripts in Internet Explorer 4.0 and above.
The fieldset element is a block element. And the tag needs to be closed, that is, it must appear in pairs:

form#staff_info fieldset {  
    background: rgba(255,255,255,.3);  
    border-color: rgba(255,255,255,.6);  
    border-style: solid;  
    border-width: 2px;  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    -khtml-border-radius: 5px;  
    border-radius: 5px;  
    line-height: 30px;  
    list-style: none;  
    padding: 5px 10px;  
    margin-bottom: 2px;  
}  
  
  
form#staff_info fieldset legend {  
    color:#302A2A;  
    font: bold 16px/2 Verdana, Geneva, sans-serif;  
    font-weight: bold;  
    text-align: left;  
    text-shadow: 2px 2px 2px rgb(88, 126, 156);  
}

<fieldset   style="max-width:90%">
<legend>系统使用说明</legend>
</fieldset>

Among them, border-width: 1px; is the thickness of the side, and border-color: #008000; is the border color. It is best to give him a border-width: 1px ;Otherwise this value will not show the desired thickness.

The style tag is: border-bottom-color, which sets the color of the bottom border. The other three borders separate the middle bottom. Change it to Top (upper part), Left (left part), Right (right part).

The above is the detailed content of Fieldset border style setting in html. For more information, please follow other related articles on the PHP Chinese website!