搜索

Multiple Borders with Simple CSS

07月07日
分类:前端 标签: 评论:[3]

不用多层div嵌套，不用图片，我们只要用简单的CSS就能实现多层边框的效果，其方法是通过:after 和 :before 伪类。效果如下图。

multi-border-with-simple-css

Code


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiple Borders with Simple CSS </title>
<style type="text/css">
	#box{
		position: relative;
		width: 400px;
		height: 400px;
		margin: 100px auto;
		background: #efefef;
		border: 1px solid #bfbfbf;
	}
	#box:before {
		position: absolute;
		width: 388px;
		height: 388px;
		border: 6px solid white;
		content: '';
	}
	#box:after {
		position: absolute;
		left: 6px;
		top: 6px;
		width: 386px;
		height: 386px;
		border: 1px dashed pink;
		content: '';
	}
</style>
</head>
<body>
	<div id="box">
	<img src="http://www.funnyapple.com/uploads/2010/07/multi-border.jpg"
alt=""/>
	</div>
</body>
</html>

查看Demo

有3 位同学留下了脚印

  1. 周威 2011-09-04

    jessica好样的。我要对你笑一个

    回复
  2. 深圳VI设计 2010-07-08

    没关系，我的眼皮能顶住。。我继续看你其它的文章去。。

    回复
  3. lzlee 2010-07-08

    这个方法是不错，可惜不能兼容ie6

    回复

同学有话要说吗？