目的
前端项目中使用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>
总结
边框和阴影的内容相对来说还是比较简单的,这里主要就介绍上面这些了,更多的应用需要在实践中探索。