CSS to achieve the image of the round-corner processing

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 QQ expressions rounded corners of the style settings, the following sections and the above section is corresponding 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 to fix a color scheme.