css精灵技术格式 |button css 圆形

以下是CSS精灵技术的格式：

/*定义要使用精灵的元素*/
.icon {
/*指定显示精灵的背景图*/
background: url(sprite.png);
/*指定显示背景图的位置*/
background-position: -18px -32px;
/*指定精灵图片在背景图中的大小*/
width: 16px;
height: 16px;
}
/*精灵图片在背景图中的位置*/
.facebook {
background-position: 0 0;
}
.twitter {
background-position: -18px 0;
}
.wechat {
background-position: 0 -18px;
}
.qq {
background-position: -18px -18px;
}

以上代码中，定义了一个.icon元素，通过指定其background属性为精灵图sprite.png的路径，并通过background-position属性来指定sprite.png中要显示的图片位置。该元素还指定了精灵图片在sprite.png中的大小。

接下来的四个样式，定义了各自代表的媒体图标在sprite.png中的位置，通过为相应元素添加该样式，就可以显示出相应的媒体图标。