纯CSS让IE7/IE8浏览器实现正圆角效果

最新推荐文章于 2021-06-10 16:47:13 发布

面条请不要欺负汉堡

最新推荐文章于 2021-06-10 16:47:13 发布

阅读量549

点赞数

分类专栏： css3 文章标签：纯CSS让IE7IE8浏览器实现正圆角效兼容ie的圆

本文链接：https://blog.csdn.net/gao_xu_520/article/details/62215253

版权

css3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>纯CSS让IE7,IE8浏览器实现正圆角效果</title>
	<style type="text/css">
	/*主要CSS*/
	* { padding: 0; margin: 0; }
	.box { width: 150px; height: 150px; line-height: 150px; position: relative; overflow: hidden; margin:100px auto; }
	.radius { position: absolute; width: 100%; height: 100%; margin: 0 0 1px 1px;
		/* IE7,IE8圆尺寸要小1像素同时有1像素偏移 */ 
		border-radius: 50%; 
		border: 149px dotted; 
		border-width: 0vw; 
		margin: 0vw; 
		color: #33CCCC; 
		background-color: currentColor; 
		/*currentColor是 color 属性的值，具体意思是指：currentColor关键字的使用值是 color 属性值的计算值。
		如果currentColor关键字被应用在 color 属性自身，则相当于是 color: inherit。
		*/
	}
	.text { position: relative; color: #fff; text-align: center; font-size: 24px; }
	.box:hover .radius{ color: #FF6600; }
	.radius_i{
		margin:100px auto;
		width: 150px; 
		height: 150px;
		overflow: hidden;
		position: relative;
	}
	.radius_i i{
		position: absolute; 
		width: 100%; 
		height: 100%;
		border-radius: 50%; 
		border: 149px dotted; 
		border-width: 0vw; 
		margin: 0vw; 
		color: #33CCCC; 
		background-color: currentColor; 
	}
	</style>
	</head>
<body>
	<div class="box"> 
		<i class="radius"></i>
	  	<p class="text">Internetke</p>
	</div>
	<div class="radius_i">
		<i></i>
	</div>
</body>
</html>

面条请不要欺负汉堡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯CSS让IE7/IE8浏览器实现正圆角效果

纯CSS让IE7,IE8浏览器实现正圆角效果 /*主要CSS*/ * { padding: 0; margin: 0; } .box { width: 150px; height: 150px; line-height: 150px; position: relative; overflow: hidden; margin:100px auto; } .radius { positio
复制链接

扫一扫