Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to set the frame in the front-end development of HTML". In the daily operation, I believe that many people have doubts about how to set the frame in the front-end development of HTML. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "how to set the frame in the front-end development of HTML." Next, please follow the editor to study!

1. Div plus four sides plus frame

1. Use css words and values

Border:1px solid # F00

Set the object border to a red border

2. The complete small instance code of div:

Www.CSS5.com.cn .a-4 {border:1px solid # F00} is red on all sides

Screenshot of an example:

Easily configure div 4 borders via border

Second, add a frame on the top of div

1. Use words and values

Border-top:1px solid # F00

2. Incomplete instance code

Www.CSS5.com.cn. A-top {border-top:1px solid # F00} configure only the top border of div

3. Screenshot of effect

Third, add a border under the div

1. Apply words and values

Border-bottom:1px solid # 000

2. Complete example code

Www.CSS5.com.cn. A-bottom {border-bottom:1px solid # 000} configure only the bottom border of div

3. The screenshot is configured with the bottom frame of DIV color

4. Add a border to the left of div

1. Apply words and values

Border-left:1px solid # 000

2. Complete source code

Www.CSS5.com.cn. A-left {border-left:1px solid # 000} sets only the left border of div

3. Screenshot

5. Add a border to the right side of div

1. Apply words and values to the left border of DIV

Border-right:1px dashed # F00

2. Code

Www.CSS5.com.cn. A-right {border-right:3px dashed # F00} sets only the right border of div

Set the blood dotted border for DIV

3. Screenshot

6. The technique of adding frames on three sides of div

1, the first slightly set the border value, that is, set the equipment decoration object 4 sides have a border, that div edge is not important to configure the border, then set the border to 0.

2. Complete HTML source code

Www.CSS5.com.cn. A-san {border:3px solid # F00; border-bottom:0} has borders on three sides and no borders on the other side

The lower frame of the equipment setting has no frame, and the other three sides set the equipment decoration frame. -- the lower border does not set the equipment frame.

3. Screenshot

4, love expression needs to be stable, first configure 4-sided CSS, and then set up equipment to remove the border pattern, so that the reader end, when reading from left to right, can match the structural effect of the first 4 sides and then the missing side. It dominates the ability of the client to read the code from left to right.

7. Div dashed border and solid border

In the example code tutorial above, you can see that one of the words in the value of border is solid, that is, set the border to the entity line.

The commonly used dotted line compatible with major browsers is dashed, that is, the example code:

Border:1px dashed # 000

Set the equipment frame 1px dotted line color border (# 000 black color value, the correct hue value in the actual organization is lost according to the picture)

That is:

Border:1px dashed # 000000-dashed 1px thickness width black border border:1px solid # 000000 solid 1px thickness width black border

At this point, the study of "how to set borders in HTML front-end development" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.