Implementation principle:
This effect is actually the variant I implemented in Chapter 2. Let’s talk about the main key codes.
The main change is the positioning of the background image, but this time it is a little different from the one in Chapter 2. This time you need to take into account the changes in the two rounded corners below.
Let’s first look at the implementation of the two rounded corners above:
/*Picture offset positioning--the upper 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 QQ emoticons’ rounded corners below. The lower part and the upper part correspond to each other.
/*Picture offset positioning--lower part*/
.sharp b.b7{background-position:-4px bottom;}
.sharp b.b6{background-position:-2px bottom;}
.sharp b.b5{background-position:-1px bottom;}
Different image calling styles:
/*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 .content{background:url(image/1.jpg) no -repeat;}
The first two sentences together form the color value of the border box, which needs to be set to the same color value. The following sentence sets the calling path of the image.
Just three sentences to get a color scheme.