前端笔记：边框和阴影

最新推荐文章于 2024-01-09 09:39:01 发布

Naisu Xu

最新推荐文章于 2024-01-09 09:39:01 发布

阅读量2.2k

点赞数 4

分类专栏： Web与JS相关文章标签： css html 设计 ui 界面

本文链接：https://blog.csdn.net/Naisu_kun/article/details/114252463

版权

Web与JS相关专栏收录该内容

58 篇文章 21 订阅

订阅专栏

文章目录

目的
边框
阴影
总结

目的

前端项目中使用CSS适当的处理边框和阴影可以提升用户视觉体验效果，这篇文章就将对相关的内容做个简单介绍。

边框

border

html元素大多都可以添加边框，边框主要有三个属性：

属性	说明
border-width	边框宽度，可指定四边、上下-左右、上-右-下-左等
border-style	边框样式，可指定四边、上下-左右、上-右-下-左等
border-color	边框颜色，可指定四边、上下-左右、上-右-下-左等

其中边框样式可选值如下：

取值	说明
none	不显示边框；如果存在其他的重叠边框，则会显示为那个边框
hidden	不显示边框；如果存在其他的重叠边框，边框不会显示
dotted	显示为一系列圆点
dashed	显示为一系列短的方形虚线
solid	显示为一条实线
double	显示为一条双实线
groove	显示为有雕刻效果的边框，样式与 ridge 相反
ridge	显示为有浮雕效果的边框，样式与 groove 相反
inset	显示为有陷入效果的边框，样式与 outset 相反
outset	显示为有突出效果的边框，样式与 inset 相反

下面是个简单的演示：
在这里插入图片描述
border的每个属性或者每个边都可以单独设置，所以常常可以见到 border-width 、 border-style 、 border-color 、 border-bottom 、 border-left ……等属性，更进一步的甚至还可以使用 border-bottom-color ……等属性：
在这里插入图片描述

border-image

除了简单的线条作为边框，我们还可以使用图像作为边框，看下面演示：
在这里插入图片描述
border-image 中有好几个参数可选，有些参数相对来说还是有些复杂的，详细的介绍可以参考别的文章：
https://www.cnblogs.com/liAnran/p/11608179.html
https://my.oschina.net/u/4308373/blog/3423031

border-radius

除了上面的几个基本属性外我们还可以通过 border-radius 来设置边框圆角。 border-radius 这个属性不光是用于边框的，还会作用于元素背景。常见的圆角按钮、圆角输入框等就是通过这个属性实现的：
在这里插入图片描述
border-radius 也可以分开来写成 border-top-left-radius 、 border-top-right-radius 、 border-bottom-right-radius 、 border-bottom-left-radius 这四个，分别控制四个角的状态：

border-radius 甚至还能单独定义每个圆角水平和垂直方向的半径：
在这里插入图片描述

border和outline

在网页上的某些元素获得焦点时会出现outline，outline和border很多方面都比较像，都有width、color、style等属性。两者的主要区别在于应用场景不同。另外outline不占据空间，不影响元素在布局中的位置。

阴影

界面设计中阴影是经常会用到的。CSS中 box-shadow 主要有下面一些属性：

属性	说明
h-shadow	必需，取值正负都可，阴影的水平位置
v-shadow	必需，取值正负都可，阴影的垂直位置
blur	可选，只能取正值，阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊
spread	可选，取值正负都可，阴影的周长向四周扩展的尺寸，正值，阴影扩大，负值阴影缩小
color	可选，阴影的颜色
inset	可选，将外部投影(默认outset)改为内部投影，inset 阴影在背景之上，内容之下

下面是个简单的演示：
在这里插入图片描述
box-shadow 的几个参数大多都挺容易理解的，稍微麻烦点的就是blur和spread，这里简单进行下介绍。在blur和spread都为0的情况下阴影的大小等同于元素本体的大小，而spread可以扩展或缩小该阴影的大小，blur是在已经计算了spread的阴影大小上向内和向外进行模糊处理。可以参考下面图示：
在这里插入图片描述
box-shadow 可以叠加使用，可以实现一些非常好看的效果：

<head>
    <style>
        body {
            background-color: black;
        }

        div {
            margin: 200px;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            box-shadow:
                inset 0 0 25px #fff,
                inset 10px 0 40px #f0f,
                inset -10px 0 40px #0ff,
                inset 10px 0 150px #f0f,
                inset -10px 0 150px #0ff,
                0 0 25px #fff,
                -5px 0 40px #f0f,
                5px 0 40px #0ff;
        }
    </style>
</head>
<body>
    <div></div>
</body>

在这里插入图片描述
上面的例子中用了非常多层的阴影实现了一个梦幻般的球体，不过这种设计对美术功底有一些要求。下面是一个新拟物风格的例子，这种风格设计上相对简单，通常只需要两层阴影就够了：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            display: grid;
            place-items: center;
            background-color: #e6e6e6;
        }

        .neumorphism {
            width: 200px;
            height: 100px;
            border: none;
            border-radius: 30px;
            background-color: #e6e6e6;
            box-shadow: 10px 10px 20px #c4c4c4, -10px -10px 20px #ffffff;
        }

        .neumorphism:hover {}

        .neumorphism:active {
            box-shadow: inset 10px 10px 20px #c4c4c4, inset -10px -10px 20px #ffffff;
        }

        .neumorphism:focus {
            outline: none;
        }

        .neumorphism span {
            display: block;
            user-select: none;
            color: #a6a6a6;
            font-size: 32px;
            text-align: center;
            line-height: 100px;
        }

        .neumorphism:active span {
            transform: scale(0.95);
        }
    </style>
</head>

<body>
    <button class="neumorphism">
        <span>BUTTON</span>
    </button>
</body>

</html>