CSS学习(一)--CSS Sprites和圆角效果
2014-06-13 17:09
399 查看
经常在网页中看到很多小图标拼凑在一个图片中，然后通过定位背景图片来显示这个小图标，例如百度的随心听，很干净清新的页面，很喜欢这个页面的布局设计，F12看看这个页面的布局，发现所有的小图标都来自于一个图片
所有的按钮都是一个a标签，display：block，设置了高、宽，然后通过background-position来定位背景图片的位置，这种技术就叫做css sprites，在百度百科中，有关css sprites的解释如下：
CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
关键的技术就在于如何使用background-position进行定位，有一篇博文讲得很好http://blog.csdn.net/JeamKing/article/details/5617088
要点，background-position：百分比时的计算，水平方向：（图片宽度-元素宽度）*百分比，垂直方向：（图片高度-元素高度）*百分比
使用圆角效果，除了低版本的ie（ie8及其以下）不支持border-radius属性,其余的都支持，使用border-radius，还可以画出很漂亮的圆形，要点就在于将取值设置为宽度的一半，另外还可以画出四分之一圆quadrant，通过设置四角（topleft、topright、bottomleft、bottomright）中的一角的radius为宽度即可。只在chrome中有效，在ff中无效
效果图chrome中：
ff的效果图：
代码：<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.generalBorderRadius{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius: 20px;/*ie9开始认识该属性*/
}
.solidCircle{
background-color: red;
-webkit-border-radius:150px;
-moz-border-radius:100px;
border-radius: 100px;/*将border-radius设置为宽度的一半，同时设置圆的背景*/
}
.hollowCircle{
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius: 100px;
}
.dottedCircle{
border:5px dotted red;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius: 100px;
}
.quadrant{
-webkit-border-top-left-radius:200px;/*在chrome中通过了测试，*/
-moz-border-radius-topleft:200px;
/*在ff中没有通过测试，ff根本不认识这个属性，所以有问题*/
}
.semi-circle{
-webkit-border-top-left-radius:100px;
-webkit-border-top-right-radius:100px;
-moz-border-radius-topleft:100px;
-moz-border-radius-topright:100px;
}
li{
list-style-type:none;
float: left;
margin: 10px;
border:5px solid red;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
line-height: 200px;
}
</style>
</head>
<body>
<ul>
<li class="generalBorderRadius"></li>
<li class='solidCircle'>it is a sample</li>
<li class='hollowCircle'></li>
<li class="dottedCircle"></li>
<li class='quadrant'></li>
<li class='semi-circle'></li>
</ul>
</body>
</html>为了解决ie6-ie8中，不支持css3的属性的bug，有一个css3pie的控件可以解决border-radius/border-shadow/liner-gradient在ie中不兼容的问题，但是还没有用过，并且去官网看了看，貌似效果不是那么好，等测试好了，再来写文章
所有的按钮都是一个a标签，display：block，设置了高、宽，然后通过background-position来定位背景图片的位置，这种技术就叫做css sprites，在百度百科中，有关css sprites的解释如下：
CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
关键的技术就在于如何使用background-position进行定位，有一篇博文讲得很好http://blog.csdn.net/JeamKing/article/details/5617088
要点，background-position：百分比时的计算，水平方向：（图片宽度-元素宽度）*百分比，垂直方向：（图片高度-元素高度）*百分比
使用圆角效果，除了低版本的ie（ie8及其以下）不支持border-radius属性,其余的都支持，使用border-radius，还可以画出很漂亮的圆形，要点就在于将取值设置为宽度的一半，另外还可以画出四分之一圆quadrant，通过设置四角（topleft、topright、bottomleft、bottomright）中的一角的radius为宽度即可。只在chrome中有效，在ff中无效
效果图chrome中：
ff的效果图：
代码：<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.generalBorderRadius{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius: 20px;/*ie9开始认识该属性*/
}
.solidCircle{
background-color: red;
-webkit-border-radius:150px;
-moz-border-radius:100px;
border-radius: 100px;/*将border-radius设置为宽度的一半，同时设置圆的背景*/
}
.hollowCircle{
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius: 100px;
}
.dottedCircle{
border:5px dotted red;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius: 100px;
}
.quadrant{
-webkit-border-top-left-radius:200px;/*在chrome中通过了测试，*/
-moz-border-radius-topleft:200px;
/*在ff中没有通过测试，ff根本不认识这个属性，所以有问题*/
}
.semi-circle{
-webkit-border-top-left-radius:100px;
-webkit-border-top-right-radius:100px;
-moz-border-radius-topleft:100px;
-moz-border-radius-topright:100px;
}
li{
list-style-type:none;
float: left;
margin: 10px;
border:5px solid red;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
line-height: 200px;
}
</style>
</head>
<body>
<ul>
<li class="generalBorderRadius"></li>
<li class='solidCircle'>it is a sample</li>
<li class='hollowCircle'></li>
<li class="dottedCircle"></li>
<li class='quadrant'></li>
<li class='semi-circle'></li>
</ul>
</body>
</html>为了解决ie6-ie8中，不支持css3的属性的bug，有一个css3pie的控件可以解决border-radius/border-shadow/liner-gradient在ie中不兼容的问题，但是还没有用过，并且去官网看了看，貌似效果不是那么好，等测试好了，再来写文章
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS学习（六）-css圆角边框高级效果、边框阴影效果（上）
- Atlas学习手记（15）：使用RoundedCorners为控件加上圆角效果
- CSS实现光滑圆角效果
- 纯CSS实现圆角效果
- 用CSS实现圆角效果
- 分享用CSS实现无图片圆角效果
- 用javascript和CSS来做模拟网页中图片的圆角效果 [转]
- css实现圆角效果的div，类似9宫格
- css圆角效果
- CSS基础应用学习系列(3)——图像的CSS阴影效果
- CSS 实现固定宽度圆角框效果
- css圆角效果--网页教学网
- 用js实现的抽象CSS圆角效果!!
- 报表 css 圆角效果
- css圆角效果
- Atlas学习手记（15）：使用RoundedCorners为控件加上圆角效果
- 使用CSS制作圆角效果
- 用CSS实现圆角按钮的效果
- 使用CSS制作圆角效果
- css圆角效果