CSS rounded corner frame 3: rounded image

Article Navigation:

Chapter 1: Basic rounded corner Frame

Chapter 2: transparent rounded background image

In the previous article, we used an image with a gradient between top and bottom as the background of the title and applied it to the rounded corner. Is this round corner box only applicable to monotonous images? Can we also make some images with rich colors transparent and rounded?

The answer is yes. Let's take a look at its ultimate effort.

Let's take a look at the end!

Figure 1

See it. This is the rounded corner image implemented with pure CSS. In order to see the transparent effect, I specially applied a background image, you can download this model to your computer, scale the window size at will, and check whether the cylindrical angle is transparent.

With this effect, you no longer need to make a rounded corner for each image. This effect is often seen on some image demo pages. It is especially applicable to lists with many images. How about it? The effect is okay!

Okay. Let's take a look at its implementation mechanism!

Implementation principle:

This effect is actually implemented in the second chapter. The main key code is described below.

The main change is the positioning of the background image, but this time is somewhat different from the second chapter. This time, we need to consider the changes of the following two rounded corners.

First, let's look at the implementation of the above two rounded corners:

/* Image offset positioning-the above part */ . Sharp B. b2 {background-position:-4px top ;} . Sharp B. b3 {background-position:-2px-1px ;} . Sharp B. b4 {background-position:-1px-2px ;}

Let's take a look at the style settings of the two rounded corners below. The following and the above sections correspond to each other.

/* Image offset positioning-the following part */ . Sharp B. b7 {background-position:-4px bottom ;} . Sharp B. b6 {background-position:-2px bottom ;} . Sharp B. b5 {background-position:-1px bottom ;}

Different image call styles:

/* Color Scheme 1, Green style ----------------------------------------*/ /* Border color */ . Color1. b2 ,. color1. b3 ,. color1. b4 ,. color1. b5 ,. color1. b6 ,. color1. b7 ,. color1. content {border-color: #262626 ;} . Color1. b1,. color1. b8 {background: #262626 ;} /* Image path */ . Color1. b2 ,. color1. b3 ,. color1. b4 ,. color1 h3 ,. color1. b5 ,. color1. b6 ,. color1. b7 ,. color1. content {background: url (image/1.jpg) no-repeat ;}

The first two sentences constitute the color value of the edge box, which must be set to the same color value. The next sentence sets the image call path.

A color scheme can be completed in three sentences.

Disadvantages:

I have to talk about its defects in this corner frame implemented by pure CSS.

1. the semantics is not good enough, because all the rounded corners are made up of HTML structure labels, and these labels do not have any meaning literally, and they exist for style expression, therefore, the increase in HTML code is not conducive to SEO optimization. This is also the biggest reason why many front-end engineers do not like it.

2. style definitions are complicated and complicated to implement. If you do not understand the principles, it will be very troublesome.

3. The width of the edge box is only applicable to smaller values, and the size of the box cannot be defined, because a width value over 1 px will produce a more intuitive sawtooth.

4. The rounded corner cannot be adjusted. to simulate a smoother effect, you need to add more containers to make the structure more complex.

5. It is not suitable for scenes with high graphics requirements, because it is not smooth enough. If you zoom in, you will see some sertices.

Advantages:

After talking about so many shortcomings, we also need to talk about its advantages:

1. Good compatibility. This rounded corner box is used in all browsers and there is no compatibility problem.

2. Auto-adaptive width and height variation, especially applicable to pages with Fluid layout.

3. You can customize the border and background color to change the style as you like.

4. There is no need to create a rounded corner image to save network traffic, reduce or reduce the workload of the designer, and reduce the compatibility of front-end personnel layout and positioning.

Scalability:

If you minimize the deficiencies, this will be a good result. I think Javascript is needed to participate in these work, this is beyond the scope of the title of this article. In addition, this JS rounded corner box already has mature works.

This model works perfectly in the following browsers:

IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0.

Complete DEMO:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = gbk "/> <title> rounded image-bkjia.com </title> <style type =" text/css "> /*********** * *************************** pure CSS rounded corner box ice extreme peak original more content please access: http://binyong.cnblogs.com /*************************************** **/* {Margin: 0; padding: 0; font-size: 12px;} body {background: url (/uploads/allimg/0912/liehuo1202/bg.gif );}. wrapper {width: 60%; margin: 0 auto;} h1 {width: 100%; margin: 0 auto; line-height: 50px; height: 50px; text-align: center; color: # fff; font-size: 14px; border-bottom: 1px # fff solid;} h2 {width: 100%; margin: 0 auto; line-height: 30px; height: 30px; text-align: center; color: # fff;} a: link, a: visited {color: # fff;} a: hover {color: # AA0000 ;} /* General style -- container width value */. sharp {width: 210px; height: 132px; margin-top: 20px; float: left; margin-left: 10px; display: inline ;}. sharp. content div {padding: 10px; text-indent: 2em ;}. content {height: 132px;}/* The height value is equal to the Image height Value-8px * // * set the style for the rounded corner frame. To use multiple different colors, the following parts do not need to be changed again --------------------------------*/. b1 ,. b2 ,. b3 ,. b4 ,. b5 ,. b6 ,. b7 ,. b8 {height: 1px; font-size: 1px; overflow: hidden; display: block ;}. b1 ,. b8 {margin: 0 5px ;}. b2 ,. b7 {margin: 0 3px; border-right: 2px solid; border-left: 2px solid ;}. b3 ,. b6 {margin: 0 2px; border-right: 1px solid; border-left: 1px solid ;}. b4 ,. b5 {margin: 0 1px; border-right: 1px solid; border-left: 1px solid; height: 2px ;}. content {border-right: 1px solid; border-left: 1px solid; overflow: hidden;}/* image offset positioning -- above part */. sharp B. b2 {background-position:-4px top ;}. sharp B. b3 {background-position:-2px-1px ;}. sharp B. b4 {background-position:-1px-2px;}/* image offset positioning-the following part */. sharp B. b7 {background-position:-4px bottom ;}. sharp B. b6 {background-position:-2px bottom ;}. sharp B. b5 {background-position:-1px bottom;}/* Color Scheme 1 ------------------------------------------ * // * border color */. color1. b2 ,. color1. b3 ,. color1. b4 ,. color1. b5 ,. color1. b6 ,. color1. b7 ,. color1. content {border-color: #262626 ;}. color1. b1 ,. color1. b8 {background: #262626;}/* image path */. color1. b2 ,. color1. b3 ,. color1. b4 ,. color1 h3 ,. color1. b5 ,. color1. b6 ,. color1. b7 ,. color1. content {background: url (/uploads/allimg/0912/liehuo1202/1.jpg) no-repeat ;}. color1. content {background-position: left-4px;}/* color scheme 2 ------------------------------------------ * // * border color */. color2. b2 ,. color2. b3 ,. color2. b4 ,. color2. b5 ,. color2. b6 ,. color2. b7 ,. color2. content {border-color: #262626 ;}. color2. b1 ,. color2. b8 {background: #262626;}/* image path */. color2. b2 ,. color2. b3 ,. color2. b4 ,. color2 h3 ,. color2. b5 ,. color2. b6 ,. color2. b7 ,. color2. content {background: url (/uploads/allimg/0912/liehuo1202/2.jpg) no-repeat ;}. color2. content {background-position: left-4px;}/* Color Scheme 3 ------------------------------------------ * // * border color */. color3. b2 ,. color3. b3 ,. color3. b4 ,. color3. b5 ,. color3. b6 ,. color3. b7 ,. color3. content {border-color: #262626 ;}. color3. b1 ,. color3. b8 {background: #262626;}/* image path */. color3. b2 ,. color3. b3 ,. color3. b4 ,. color3 h3 ,. color3. b5 ,. color3. b6 ,. color3. b7 ,. color3. content {background: url (/uploads/allimg/0912/liehuo1202/3.jpg) no-repeat ;}. color3. content {background-position: left-4px;}/* Color Scheme 4 ------------------------------------------ * // * border color */. color4. b2 ,. color4. b3 ,. color4. b4 ,. color4. b5 ,. color4. b6 ,. color4. b7 ,. color4. content {border-color: #262626 ;}. color4. b1 ,. color4. b8 {background: #262626;}/* image path */. color4. b2 ,. color4. b3 ,. color4. b4 ,. color4 h3 ,. color4. b5 ,. color4. b6 ,. color4. b7 ,. color4. content {background: url (/uploads/allimg/0912/liehuo1202/4.jpg) no-repeat ;}. color4. content {background-position: left-4px;}/* color scheme 5 ------------------------------------------ * // * border color */. color5. b2 ,. color5. b3 ,. color5. b4 ,. color5. b5 ,. color5. b6 ,. color5. b7 ,. color5. content {border-color: #262626 ;}. color5. b1 ,. color5. b8 {background: #262626;}/* image path */. color5. b2 ,. color5. b3 ,. color5. b4 ,. color5 h3 ,. color5. b5 ,. color5. b6 ,. color5. b7 ,. color5. content {background: url (/uploads/allimg/0912/liehuo1202/5.jpg) no-repeat ;}. color5. content {background-position: left-4px;}/* color scheme 6 ------------------------------------------ * // * border color */. color6. b2 ,. color6. b3 ,. color6. b4 ,. color6. b5 ,. color6. b6 ,. color6. b7 ,. color6. content {border-color: #262626 ;}. color6. b1 ,. color6. b8 {background: #262626;}/* image path */. color6. b2 ,. color6. b3 ,. color6. b4 ,. color6 h3 ,. color6. b5 ,. color6. b6 ,. color6. b7 ,. color6. content {background: url (/uploads/allimg/0912/liehuo1202/6.jpg) no-repeat ;}. color6. content {background-position: left-4px;}/* color scheme seven ------------------------------------------ * // * border color */. color7. b2 ,. color7. b3 ,. color7. b4 ,. color7. b5 ,. color7. b6 ,. color7. b7 ,. color7. content {border-color: #262626 ;}. color7. b1 ,. color7. b8 {background: #262626;}/* image path */. color7. b2 ,. color7. b3 ,. color7. b4 ,. color7 h3 ,. color7. b5 ,. color7. b6 ,. color7. b7 ,. color7. content {background: url (/uploads/allimg/0912/liehuo1202/7.jpg) no-repeat ;}. color7. content {background-position: left-4px;}/* color scheme 8 ------------------------------------------ * // * border color */. color8. b2 ,. color8. b3 ,. color8. b4 ,. color8. b5 ,. color8. b6 ,. color8. b7 ,. color8. content {border-color: #262626 ;}. color8. b1 ,. color8. b8 {background: #262626;}/* image path */. color8. b2 ,. color8. b3 ,. color8. b4 ,. color8 h3 ,. color8. b5 ,. color8. b6 ,. color8. b7 ,. color8. content {background: url (/uploads/allimg/0912/liehuo1202/8.jpg) no-repeat ;}. color8. content {background-position: left-4px;}/* color scheme 9 ------------------------------------------ * // * border color */. color9. b2 ,. color9. b3 ,. color9. b4 ,. color9. b5 ,. color9. b6 ,. color9. b7 ,. color9. content {border-color: #262626 ;}. color9. b1 ,. color9. b8 {background: #262626;}/* image path */. color9. b2 ,. color9. b3 ,. color9. b4 ,. color9 h3 ,. color9. b5 ,. color9. b6 ,. color9. b7 ,. color9. content {background: url (/uploads/allimg/0912/liehuo1202/9.jpg) no-repeat ;}. color9. content {background-position: left-4px;}/* helper's house http://www.bkjia.com --------------------- */</Style> 





Tip: the code can be modified before running!