用CSS在外部加一层边框

最新推荐文章于 2024-07-10 16:05:14 发布

寻找现实扭曲力场

最新推荐文章于 2024-07-10 16:05:14 发布

阅读量1.2w

点赞数 1

分类专栏：前端笔记

本文链接：https://blog.csdn.net/pearyangyang/article/details/51397256

版权

前端笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近看@CSS魔法在讲述CSS奇特之处的时候的一个案例：就是在已知的div中加入一个外部的边框。我们看下下面的例子sample1：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>base1 double border</title>
	<style>
		.outer{
			width:104px;
			height:104px;
			border:2px solid green;
		}

		.inner{
			positive:relative;
			margin:0 auto;
			width:100px;
			height:100px;
			border:2px solid blue;
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner">box</div>
	</div>
</body>
</html>

比如我们已经一个div，class为inner，我们通常想的是加一个outer的div。然后div有他自己的css样式。效果如下图：

下面用纯CSS来实现加边框的特效sample2：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>base2 double border</title>
	<style>
		
		/*
		outline(轮廓)是绘制元素周围的一条线，位于边框的外围，可起到突出元素的作用。
		所有浏览器都支持 outline 属性。如果规定了 !DOCTYPE，则 IE8 支持 outline 属性。
		.inner{
			width:100px;
			height:100px;
			border:2px solid blue;
			outline: #00FF00 solid thick;
		}
		*/

		/*
			Internet Explorer 和 Opera 不支持 support outline-offset 属性。
		*/
		.inner{
			width:100px;
			height:100px;
			border:2px solid blue;
			outline:2px solid red;
			outline-offset: 0px;
		}
	</style>
</head>
<body>
	<div class="inner">box</div>
</body>
</html>

我们可以用上面的纯CSS实现，用到了outline这个参数，也可以用更加灵活加上outline-offset属性来更加丰富。

最后我们可以用阴影特效来实现边框效果，例如下面的sample3.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>base3 double border</title>
	<style>
		.inner{
			/*
				单层阴影和多层阴影
			*/
			width:100px;
			height:100px;
			border:2px solid blue;
			box-shadow: 0 0 0 2px #888888,
						0 0 0 5px red;
		}
	</style>
</head>
<body>
	<div class="inner">box</div>
</body>
</html>

CSS的世界缤纷多彩，一个前端爱好者的分享~