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

最新推荐文章于 2022-06-16 22:57:30 发布

Dragon水魅

最新推荐文章于 2022-06-16 22:57:30 发布

阅读量318

点赞数

分类专栏：零基础学习Web开发文章标签： html css

本文链接：https://blog.csdn.net/qq_43650934/article/details/109146351

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

官方资料

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