Today, let’s talk about using css. This is an image effect
1. Image size, border
The size of the image, we can directly use the attributes width and height of img to set
We need to use css style for border, we use border to set
As you can see, our picture has a 1px width red solid line border, solid is the solid line, and of course there is a dotted line
Two, mixed graphics and text
This picture and text mixing is a key point, we usually need to use this thing in the layout
Let's take a look at the situation without typesetting
As you can see, the picture occupies a line by itself, the right side is empty, and the text is below
We set the picture, let the picture float to the left or right, let’s take a look
You can see if our text has passed, and then we can make this word away from the picture for some examples, let's add some styles
Is it a certain distance from the text?
Three, fillet pictures
This is a new thing in css3, which can deform the border of the picture. This is the border-radius used
As you can see, the four corners of this picture are all curved
Four, responsive pictures
Our future website needs this kind of responsive pictures, otherwise the size of the picture is fixed, which will be different for the display on the screen of mobile phones and computers. Responsive pictures will automatically adapt to screens of various sizes.
Let's take a look
Then we use the phone mode to take a look
As you can see, it is OK. We will use this method to display the picture in response.
This blog is here, everyone practice it, if you don’t, you can add me QQ: 2100363119, of course, the style of the picture is more than that, others can see https://www.runoob.com/css3/css3- images.htmlNovice Tutorial
Recently, my official website has been opened, you can check it out: https://www.lemon1234.com