Fieldset border style setting in html

黄舟
Release: 2018-05-11 15:53:23
Original
16980 people have browsed it

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);  
}
Copy after login

Fieldset border style setting in html

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template