Make-up for webpages-smooth and comfortable rounded corner Frame

Make-up for webpages-smooth and comfortable rounded corner Frame

A webpage is made up of a border structure. It finds a suitable place for webpage elements, but it is not bound to the characteristics of the elements, which is favored by web designers. Currently, CSS + div is combined, it provides a skeleton and external skin for the web page. Compared with code implementation, it is more likely to gain momentum first.

The straight borders on the web page can easily give people a sense of constraint. To enhance the UI's affinity, some websites use a pale border or even a borderless border to achieve the desired effect, you can also change the border to a rounded corner. In the following blog, I will learn about the rounded corner boxes with a variable width and the rounded corner boxes with a variable height. These two methods are very popular to improve the reusability of the rounded corner boxes.

Rounded corner box with variable width

L prepare Images

Screenshot of a beautiful rounded corner

For example:

Process the image in PS and use a slicing tool to divide the image into five parts. For example:

Place the five images with clear names in the images folder.

L Division Module

Such as code:

<Div id = "Left" class = "round"> <Div class = "TOP"> </div> <Div class = "Middle"> <p> welcome to the small rounded corner box you </P> </div> <Div class = "bottom"> <p> </P> </div>

Divided into the upper, middle, and lower parts

L image placement

Make Div. round gets the image background in the upper left corner, Div. top: Get the image background in the upper-right corner, Div. middle gets the image background in the middle right and tile it in the Y axis. Div. bottom gets the background of the image in the lower left corner, so that Div. the P tag in bottom gets the background image in the lower right corner. This forms a complete rounded corner frame. The specific CSS style is as follows:

/* ----------------------- Match all tags ------------------ */* {padding: 0; margin: 0 auto; text-align: center ;} /* set the background color ------------------ */body {font-size: 12px; Background-color: # fdfff9;}/* --------------------- set the background image in the upper-left corner of the rounded corner --------------------*/. round {background-image: URL (images/round_left_top.gif); background-repeat: No-Repeat; Background-position: Top left ;} /* ----------------------- set the background image in the upper-right corner of the corner frame --------------------*/. round. top {background-image: URL (images/round_right_top.gif); background-repeat: No-Repeat; Background-position: Top right; Height: 44px ;} /* ----------------------- set the background image in the middle right of the corner frame --------------------*/. round. middle {background-image: URL (images/round_right_middle.gif); background-position: Top right; Background-repeat: Repeat-y ;} /* ----------------------- set the background image in the lower-left corner of the corner frame --------------------*/. round. bottom {background-image: URL (images/round_left_bottom.gif); background-position: Bottom left; Background-repeat: No-Repeat ;} /* ----------------------- set the background image in the lower right corner of the rounded corner box --------------------*/. round. bottom P {background-image: URL (images/round_right_bottom.gif); background-position: bottom right; Background-repeat: No-Repeat; Height: 13px ;} /* ----------------------- set the size of the small rounded corner frame ------------------ */# Left {width: 180px; margin: 100px auto ;} /* set the size of the large rounded corner frame ------------------ */# right {margin: 100px auto; width: 700px; Height: auto;}/* --------------------- set the font ------------------ */# right. middle P {text-align: center; font-size: 20px; font-family: 文 ;}

L variable width

Style display:

Rounded corner frame with variable height

L Method

The preceding method is similar, but you only need to use the image above to take two parts:

 

The Div. Middle in the middle processes the color of the left and right borders. Its color is the border color of the upper and lower background images. Therefore, the color of the left and right sides of the border remains unchanged, and the DIV in the middle can become larger and smaller. The specific code will not be pasted. Please try it yourself.

CSS style in the middle area

    background-color: #fffaef;    border-left: #ffc287 1px solid;    border-right: #ffc287 1px solid;

 

L variable height