Help div rounded corners problem_html/css_WEB-ITnose-HTML Tutorial-php.cn

Now there are four rounded corner cutting pictures: upper left, upper right, lower left and lower right.
How to set the div background color to rounded corners? How to put four pictures on the four corners of the div? Help?

Reply to the discussion (solution)

demo this here

<div class="box"> <div class="box-outer">    <div class="box-inner">        <p>sdfsdffffddsfdf</p>    </div><div><div>.box{background:url(左下) no-repeat left bottom}.box-outer{background:url(右下)no-repeat right bottom;}.box-inner{background:url(左上) no-repeat  left top;}p{background:url(右上) no-repeat right top;}

Copy after login

The specific position of the picture can be adjusted using the four orientation values of padding

CSS code?1234567891011121314151617181920

.box{background:url(lower left) no-r...

Hero? exist?

Now every corner is like this, how to set padding, for example, in the lower left corner I set it like this
.box{
background:url(lower left) no-repeat left bottom;
padding-left: 13px;
padding-bottom: 13px;
}
Isn’t this possible?

It seems that the surrounding area of your picture is transparent, and most of it is black and gray. Then the background color should be as contrasting as possible with the color of the corner image. Also, don’t set the background color of the div. Let it inherit the background of the body and it will look better.

Your picture seems to be transparent around it, and most of it is black and gray. Then the background color should be as contrasting as possible with the color of the corner image. Also, don’t set the background color of the div. Let it inherit the background of the body and it will look better

What we want now is a div area with a background color, the corners are rounded, the div background color and the color of the picture Consistently, there are many examples on the Internet that do not require pictures. How to set up the pictures using these four corners?

Your picture seems to be transparent around it, and most of it is black and gray. Then the background color should be as contrasting as possible with the color of the corner image. Also, don’t set the background color of the div. Let it inherit the background of the body and it will look better

In the code you gave me, the four pictures are added. How can I change the color of the div outside the rounded corners to the body The color is the same

Have you set the background color of your div?

Have you set the background color of your div?

Yes, it is set up

You can read the book "CSS Thorough Design and Research", which explains it in more detail. You can also read this article about CSS rounded corner production. , I hope it will be helpful to the original poster~

This is difficult to handle because the corner of your small picture is transparent. If your div has a background color set, it is inconsistent with the background color of the body. , then this technology is a failure

This is difficult to handle because the corners of your small picture are transparent. If your div has a background color set, it is inconsistent with the background color of the body. , then this technology is a failure

Well, thank you very much, there is no way to design it like this. I will change the design according to what is said on the Internet without pictures

border-radius: 5px

Related labels：

求救div圆角问题

source：php.cn

Previous article：Please help. Is the image centered or stretched? _html/css_WEB-ITnose Next article：How to achieve the sliding effect on 360 Secure Browser 5.0 official version? ? _html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn