网页前端开发一个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

<!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>

第二种方法:用多重阴影模拟边框,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

<!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>

第三种方法:利用伪元素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

<!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>

前端开发能找什么工作|前端开发工程师考核指标|web前端开发工程师掌握的技术

» 本文来自:前端开发者 » 《网页前端开发一个DIV实现多重边框》
» 本文链接地址:https://www.rokub.com/5010.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!