前端笔记：边框和阴影
文章目录
- 目的
- 边框
- border
- border-image
- border-radius
- border和outline
- 阴影
- 总结
目的
前端项目中使用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>
总结
边框和阴影的内容相对来说还是比较简单的，这里主要就介绍上面这些了，更多的应用需要在实践中探索。
前端笔记：边框和阴影相关推荐
- Web前端开发笔记——第三章 CSS语言 第七节 圆角边框、阴影
目录 前言 一.圆角边框 (一)border-×-×-radius (二)border-radius 二.阴影 (一)基本阴影设置 (二)内部阴影设置 结语 前言 本节介绍仅在CSS3中的新内容,例如 ...
- Pink老师前端笔记-CSS第七天
Pink老师前端笔记-CSS第六天 # day09-前端基础CSS第七天 学习目标: 能够使用精灵图 能够使用字体图标 能够写出 CSS 三角 能够写出常见的 CSS 用户界面样式 ...
- Web前端 笔记 （21-45）
Web前端 笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例 未加语义化标签 添加语义化标签 23.表格属性 1.常见表格属 ...
- 1.前端笔记之html
title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 出处:http://www ...
- [前端笔记——CSS] 12.处理不同方向文本
[前端笔记--CSS] 12.处理不同方向文本 1.书写模式 2.书写模式.块级布局和内敛布局 3.逻辑属性和逻辑值 1.书写模式 CSS 中的书写模式是指文本的排列方向是横向还是纵向的.writin ...
- html div圆滑效果,美化网页div -让边框拥有阴影，边角变得圆滑
DIV边框过于单调? 来为你的DIV边框加上阴影吧,充实边框,美化页面必备 .main{ background-color: rgba(102, 146, 191, 0.44); /*边框*/ bor ...
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法 参考文章: (1)移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法 (2)https://www.cnblogs.com/zhaoda ...
- 【C#】使用DWM实现无边框窗体阴影或全透窗体
1.无边框窗体阴影,win7(需要开启Aero效果)及以上系统 public class LdwmForm : Form{public LdwmForm(){Initialize();}/// < ...
- box-shadow四个边框设置阴影样式
其实对于box-shadow,老白我也是一知半解,之前用的时候直接复制已有的,也没有仔细思考过box-shadow的数值分别对应什么,最后导致阴影的边如何自由控制,苦于懒人一个一直没有正式去学习,今天 ...
最新文章
- FLEX中Sequence实例教程. 顺序执行的效果.
- 【bzoj 4059】Non-boring sequences
- 【算法基础】数据结构导论第一章-绪论.pptx
- BZOJ3527: [Zjoi2014]力
- 数据持化技术的发展演变(SQL、JDBC、mybatis)
- 查看目录是否为内存盘_CentOS系列002：挂载数据盘
- RS232应用----电功率计
- 第14章 使用Kotlin 进行 Android 开发
- jQuery鼠标悬浮事件
- python设置excel格式_Python使用xlwt写excel并设置写入格式
- 《基于多支持向量机综合的电力系统暂态稳定评估》总结
- wps多出来的页面怎么办？wps怎么删除不要的页
- 【好文推荐】java写安卓脚本
- 红帽6.2 DOS无盘 NetWare 制作
- 为什么要学习Go语言?
- 机器学习 | 交叉验证
- 永恒之蓝--Windows server 2003R2
- LeetCode之Shortest Unsorted Continous Subarray
- 为什么1KB=1024B,而不等于1000B?
- iphonex 底部遮挡返回键 解决方法