How to control the random fillet style of a picture by css
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!
