您的位置：首页 > Web前端 > CSS

CSS实现多重边框和内凹圆角

2016-04-20 23:08 856 查看

CSS实现多重边框

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>CSS实现多重边框</title>
<style>
div {
width: 100px;
height: 150px;
margin: 40px auto;
text-align: center;
background: lightblue;
border: 20px solid cornflowerblue;
}
#box1 {
outline: 5px solid chocolate;
outline-offset: -10px; /*outline描边模拟的边框会在真正边框的里面，但是描边没有办法贴合圆角的位置*/
}
#box2 {
/*盒子阴影实现双重边框，第四个参数表示投影扩张的像素，","分隔绘制多个投影*/
-webkit-box-shadow: 0 0 0 5px brown,
0 0 0 10px yellow,
0 0 0 15px green;
-moz-box-shadow: 0 0 0 5px brown,
0 0 0 10px yellow,
0 0 0 15px green;
box-shadow: 0 0 0 5px brown,
0 0 0 10px yellow,
0 0 0 15px green;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
</style>
</head>
<body>

<div id="box1">box1</div>
<div id="box2">box2</div>
<h1>box1和box2的绘制方式都不会影响布局</h1>

</body>
</html>

CSS实现内凹圆角的思路【截图来自慕课网】：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航