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

This article mainly introduces how to control the css picture random fillet style, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

1. The left side of the css picture becomes a rounded corner.

Code example:

The left side of the css picture becomes a fillet.

.wrapperimg {

Border-top-left-radius:2em

Border-bottom-left-radius:2em

}

The effect is as follows:

7195b4eac7f080f194e1ca9ca70a84b.png

2. The css picture is centered and the css picture fillet frame is displayed.

Code example:

Cssimg round corner edge exampl

.wrapper {

Width:200px

Height:100px

Margin:0auto

}

.wrapperimg {

Border-radius:2em

}

One of the important attributes involved is that border-radius; can fillet the image through this attribute.

The functions of the attributes of border-radius are as follows:

Border-radius:2em, which means that all four corners are fillets, and the radius of each fillet is 2em.

You can set two values, such as border-radius:2em2em;, the first value represents the upper left fillet and the lower right fillet, and the second value represents the upper right fillet and the lower left fillet.

Set 3 values, such as border-radius:2em2em2em; the first value represents the upper-left fillet, the second value represents the upper-right and lower-left fillet, and the third value represents the lower-right fillet.

Set 4 values, such as border-radius:2em2em2em2em;4, which represent upper left, upper right, lower right and lower left, respectively.

You can also split the four corners into four separate properties, such as upper left fillet (border-top-left-radius), upper right (border-top-right-radius), lower right (border-bottom-right-radius), and lower left fillet (border-bottom-left-radius).

Thank you for reading this article carefully. I hope the article "how to control the arbitrary rounded corner style of pictures" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.