CSS学习(一)--CSS Sprites和圆角效果

最新推荐文章于 2024-06-24 10:48:58 发布

zd10101501

最新推荐文章于 2024-06-24 10:48:58 发布

阅读量745

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/danzhang1010/article/details/30479645

版权

css 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

经常在网页中看到很多小图标拼凑在一个图片中，然后通过定位背景图片来显示这个小图标，例如百度的随心听，很干净清新的页面，很喜欢这个页面的布局设计，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中不兼容的问题，但是还没有用过，并且去官网看了看，貌似效果不是那么好，等测试好了，再来写文章