How do I use CSS to display a picture as rounded corners

Use CSS to display the picture as a rounded angle.

See it, this is the use of pure CSS to achieve the rounded image, in order to see the effect of transparency, I deliberately applied a background image, you can download this model to your computer, the size of the expansion window at will, to see whether the rounded corners are transparent.

With this effect, you no longer worry about the work of the rounded corners of each picture, this effect in some picture class of the demo page is often seen, especially applicable to those pictures more than the list. How, the effect is also OK!

OK, let's look at the implementation mechanism of it!

Implementation principle:

The effect is actually my variant implementation in Chapter Two, and here's the main key code.

The main change is the positioning of the background image, but this time and the second chapter of the different, this time need to take into account the following two rounded corners of the change.

First look at the above two rounded corners of the implementation:

/* Picture 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;}

Take a look at the following two rounded corner style settings, and the following sections correspond to each other.

/* Picture offset positioning--The following section * *

. Sharp B.B7{BACKGROUND-POSITION:-4PX Bottom;

. Sharp b.b6{background-position:-2px Bottom;

. Sharp b.b5{background-position:-1px Bottom;

Different picture call style:

/* color scheme one, 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;}

/* Picture Path * *

. Color1. B2,.color1. B3,.color1. B4,.color1 h3,.color1. B5,.color1 b6,.color1. B7,.color1 ( image/1.jpg) No-repeat;}

The preceding two sentences together form the color value of the edge box, which needs to be set to the same color value, followed by a set of the image call path.

Three words and a color scheme.