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

In this article, the editor introduces in detail "how html makes the picture fillet", the content is detailed, the steps are clear, and the details are handled properly. I hope this "html how to make the picture fillet" article can help you solve your doubts, following the editor's ideas slowly in depth, let's learn new knowledge.

There is a property in the css style: the border-radius property is common

It is also the easiest and quickest property to set the fillet effect; border-radius (which means "border radius") only needs to give border-radius

By providing a value, you can set the radius of the border fillet. All legal CSS measures can be used: em, ex, pt, px, percentage, and so on.

Border-radius includes 5 ways to style fillets:

Border-radius: sets the fillet style for four borders at the same time.

Border-top-left-radius: sets the fillet style of the upper-left border.

Border-top-right-radius: sets the fillet style of the upper-right border.

Border-bottom-left-radius: sets the fillet style of the lower-left border.

Border-bottom-right-radius: sets the fillet style of the lower-right border.

Picture example (set four border fillet values to 20px):

Parameter description of border-radius:

Border-radius can set the same value for four corners at once, or you can set fillet styles for each of the four corners. The secret is to set the number of parameters of border-radius. The number of parameters of border-radius ranges from 1 to 4.

The following describes the meaning represented by parameter 1, Murray, and 4 respectively:

1. When the number of parameters is: 1

Description: this setting is used for the fillet style of all 4 borders.

Example: border-radius:20px

two。 When the number of parameters is: 2

Description:

Parameter 1: the fillet style of the upper-left and lower-right borders.

Parameter 2: the fillet style of the upper-right and lower-left borders.

Example: border-radius:20px 10px

3. When the number of parameters is: 3

Description:

Parameter 1: the fillet style of the upper-left border.

Parameter 2: the fillet style of the upper-right and lower-left borders.

Parameter 3: the fillet style of the lower right corner border.

Example: border-radius:20px 10px 40px

4. When the number of parameters is: 4

Description:

Parameter 1: the fillet style of the upper-left border.

Parameter 2: the fillet style of the upper-right border.

Parameter 3: the fillet style of the lower right corner border.

Parameter 4: the fillet style of the lower-left border.

Example: border-radius:20px 10px 50px 30px

Of course, the style of the image above can also be set with a separate style of fillet: border-top-left-radius: 20px.

Border-top-right-radius: 10px .

Border-bottom-left-radius: 30px .

Border-bottom-right-radius: 50px .

It's just that this setup is too cumbersome to optimize the css file code.

Circular border (example introduction)

.demo {

Width: 100px

Height: 100px

Border: 1px solid salmon

Background-color: salmon

Border-radius: 100%

}

As long as the value in border-radius is set to 100%, you can get such a circular border. The circular border can be used in the user's profile picture display and so on.

After reading this, the article "how to fillet a picture with html" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, 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.