【CSS揭秘】案例2、多重边框_css 第一个容器有边框同时下边框第二个容器左边框下边框-优快云博客

本文链接：https://blog.youkuaiyun.com/ruirui_1996/article/details/78031748

本文介绍了如何使用CSS中的box-shadow属性为元素添加阴影效果，同时展示了如何利用outline属性创建虚线边框，并通过实例说明了这两种属性的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

box-shadow

定义和用法

box-shadow 属性向框添加一个或多个阴影

语法

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边。
v-shadow	必需。垂直阴影的位置。如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部。
blur	可选。模糊距离。其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。
spread	可选。阴影的尺寸。其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小。
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改为内部阴影。

详细参考

http://www.w3school.com.cn/cssref/pr_box-shadow.asp

形成如下样式的代码：（运用box-shadow）
这里写图片描述

HTML代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2、多重边框</title>
    <link rel="stylesheet" href="2.css"/>
</head>
<body>
<div id="div1"></div>
</body>
</html>

CSS代码：

@charset "UTF-8";
#div1 {
    width: 300px;
    height: 150px;
    margin: 30px auto;
    background: green;
    box-shadow: 0 0 0 10px #ffff00, 0 0 0 20px #655;
}

body {
    background: #000;
}

但是如果是要形成一个虚线的边框，box-shadow就没有办法了，这时可以使用outline（描边）属性来实现。如实现上面的两层框的css代码就可以写成：

@charset "UTF-8";
#div1 {
    width: 300px;
    height: 150px;
    margin: 30px auto;
    background: green;
    border: 10px solid #ffff00;
    outline: 10px solid #655;
    /*box-shadow: 0 0 0 10px #ffff00, 0 0 0 20px #655;*/
}
/*由于上一个代码运用阴影的属性来实现双层边框，因此加上了margin:30px;的代码，使得div向下移动，以便于显示出阴影（模拟描边）的效果。
但是outline属性不需要，所以加上margin值后，会比之前的向下移动30px。*/
body {
    background: #000;
}

实现以下缝合的效果：
这里写图片描述

CSS代码：

@charset "UTF-8";
#div1 {
    width: 300px;
    height: 150px;
    background: green;
    outline: 1px dashed #fff;
    outline-offset: -10px; /*对轮廓进行偏移，并在边框边缘进行绘制*/
    border-radius: 10px;
}
body {
    background: #000;
}