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

This article mainly introduces the relevant knowledge of the case analysis of css3 words and grammatical structure, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this css3 word and grammatical structure example analysis article. Let's take a look at it.

I. css3 words and grammatical structures

1. DIVCSS3 fillet words:

Border-radius

2. Grammatical structure

Div {border-radius:5px}

Set the DIV object box 4 corners 5 pixel fillet effect

Div {border-radius:5px 0;}

Set the 5px fillet in the upper left corner and lower right corner of the DIV object box, and the other two corners are 0 non-round corners

Div {border-radius:5px 5px 0 0;}

Set the 5px fillet in the upper left and right corner of the DIV object box, and the other two corners are 0 non-rounded corners.

3. Description:

Border-radius:3px 4px 5px 6px

Represents the upper left corner of the setting object 3px fillet, upper right corner 4px fillet, lower right corner 5px fillet, lower left corner 6px fillet.

II. CSS3 fillet case

DIVCSS5 sets fillets for two DIV boxes and fillets for a picture to practice CSS3 fillets.

1. Case HTML code

Object fillet online demonstration DIVCSS5 VIP box upper left corner and upper right corner object fillet test DIV box fillet box object fillet test DIV box fillet test

Fillet test of picture object

2. Case CSS code:

.box {border-radius:5px 5px 00; border:1px solid # 000X widthgroup 300px.box2 img {border-radius:5px} .box3 {border-radius:5px 0; background:#999;width:300px; height:80px; margin:0 auto}

4. Case description

1) the first BOX box sets the border style in order to observe the fillet effect, and sets the fillet style border-radius:5px 5px 0 0; sets the upper left corner and upper right corner fillet.

2) the second BOX3 box sets the background color, the fillet style border-radius:5px 0, and the upper left corner and lower right corner fillet

3) the third one sets the fillet style border-radius:5px for the picture img in the box2 box, and sets the rounded corners on all four corners.

This is the end of the article on "case Analysis of css3 words and grammatical structures". Thank you for reading! I believe you all have a certain understanding of the knowledge of "case analysis of css3 words and grammatical structures". If you want to learn more, you are welcome to follow the industry information channel.

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.