零基础学习CSS(16)——轮廓设计、元素阴影

Dragon水魅

发布于 2026-01-23 19:05:31

930

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

outline-offset：https://man.ilovefishc.com/pageCSS3/outline-offset.html box-shadow：https://man.ilovefishc.com/pageCSS3/box-shadow.html

以上三个属性分别是：轮廓样式、轮廓颜色、轮廓宽度，同样可以按顺序缩写。

通过 outline-offset 设置轮廓在 border 外的偏移量：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元素尺寸</title>
    <style type="text/css">
        p {
            width: 10wm;
            margin: 20px auto;
            padding:20px;
            border: 5px solid lightblue;
            outline: 20px solid pink;
            outline-offset: 5px;
        }
    </style>
</head>
<body>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim debitis delectus tempore ipsum dolor voluptate mollitia, dolore at eaque aliquam iusto vitae, excepturi consequatur doloremque deleniti soluta quibusdam ab eum!</p>
</body>
</html>

轮廓并不属于元素尺寸的一部分，它并不会影响到原有的页面布局。 轮廓永远是方的，没有弧度。

通过 box-shadow 设置元素阴影：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元素尺寸</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            margin: 50px;
            box-shadow: 0 0 8px 8px lightblue, 0 0 8px pink inset;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>