网页前端开发一个DIV实现多重边框
摘要：软件前端开发需要什么|网页前端开发工程师|网易《前端开发工程师》微专业 最近看到一个个多重边框的例子，在这里跟大家分享一下。 学过css的人看到或听到边框的话就会条件反射的想起border属性，可是一个DIV标签用……
软件前端开发需要什么|网页前端开发工程师|网易《前端开发工程师》微专业
最近看到一个个多重边框的例子，在这里跟大家分享一下。
学过css的人看到或听到边框的话就会条件反射的想起border属性，可是一个DIV标签用border属性只能实现一层边框，那么两层以上要怎么实现呢？
第一种方法：用outline属性，但outline不会占据空间。
[code]<!DOCTYPE html>
<html lang=”en”>####
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
div {
margin: 0 auto;
width: 100px;
height: 100px;
border: 5px groove #f00;
outline: 5px outset #0f0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
代码片段 1
第二种方法：用多重阴影模拟边框，box-shadow不会占据空间但会根据border的形状而改变形状。
[code]<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
div {
margin: 50px auto;
width: 100px;
height: 100px;
border-radius: 10px;
border: 5px groove #E3FD1E;
box-shadow: 0 0 0 5px #000,
0 0 0 10px #f00,
0 0 0 15px #0fa,
0 0 0 20px #0bd,
0 0 0 25px #f58,
0 0 0 30px #555,
0 0 0 35px #d54,
0 0 0 5px #f00 inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>[/code]
代码片段 2
第三种方法：利用伪元素before和after，伪元素会占据实际空间哦。可以改变边框之间的间隔。
[code]<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
.div1 {
position: relative;
margin: 100px auto;
width: 100px;
height: 100px;
border: 5px dashed #000;
}
.div1:before {
position: absolute;
left: -10px;
top: -10px;
width: 110px;
height: 110px;
border: 5px outset #f00;
content: ”;
display: block;
z-index: -1;
}
.div1:after {
position: absolute;
left: -15px;
top: -15px;
width: 120px;
height: 120px;
border: 5px inset #0f0;
content: ”;
display: block;
z-index: -2;
}
img {
width: 100px;
height: 100px;
}
</style></head>
<body>
<div class=”div1″><img src=”2.jpg” alt=”图片” title=”图片”></div>
</body>
</html>[/code]
代码片段 3
前端开发能找什么工作|前端开发工程师考核指标|web前端开发工程师掌握的技术
近期评论