CSS各种边框背景大全

信ID：WEB_wysj(点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

（页底留言开放，欢迎来吐槽）

● ● ●

1、半透明边框

难题：直接设置一个半透明的边框不起作用。

解决方案：padding-box盒模型border:10px solid rgba(255,255,255,.5);background: white;background-clip: padding-box;

2、多重边框

背景知识:box-shadow 的基本用法

box-shadow: X轴偏移量 Y轴偏移量 [模糊半径] [扩展半径] [阴影颜色] [投影方式];

解决方案一：

利用box-shadow的属性扩张半径background: 
yellowgreen;box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);
特点：box-shadow 方案只能模拟实线边框，会贴合元素的圆角

解决方案二：outline 方案background: yellowgreen;border: 10px solid #655;outline: 5px solid deeppink;特点：实现的“边框”不会贴合元素的圆角，可以实现虚线边框

3、灵活的背景定位

示例：实现一个背景图在div右下角，距离右边10px 下边10px 如图;

解决方案一：background-position扩展方案background: #58a url(code-pirate.svg) no-repeat bottom right;background-position: right 10px bottom 10px;

解决方案二：background-origin 方案padding: 10px;background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */background-origin: content-box;

解决方案三：calc 方案background: url("code-pirate.svg") no-repeat;background-position: calc(100% - 20px) calc(100% - 10px);

4、边框内圆角

两个div很容易实现，那么一个div呢？

解决方案：利用box-shadow和outlinebackground: tan;border-radius: .8em;padding: 1em;outline: .6em solid #655;box-shadow: 0 0 0 .4em #655;

box-shadow的宽要小于outline宽度值，大于 (Math.sqrt(2)-1)r（这里的 r 表示 border-radius）

5、条纹背景

背景知识：CSS 线性渐变，background-size

案例一：等宽的双色水平条纹

background: linear-gradient(#fb3 50%, #58a 0);background-size: 100% 30px;

案例二：不等宽的双色水平条纹

background: linear-gradient(#fb3 30%, #58a 0);background-size: 100% 30px;

案例三：三色水平条纹

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;

案例四：垂直条纹

background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0);background-size: 30px 100%;

案例五：斜向条纹

失败方案：改变 background-size 的值和渐变的方向background: linear-gradient(45deg, #fb3 50%, #58a 0);background-size: 30px 30px;

正确方案：做到无缝拼接(60度的条纹不好做)background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);background-size: 30px 30px;

优化方案：重复渐变做60度条纹background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);height:100%;

案例六：灵活的同色系斜向条纹

在大多数情况下，我们想要的条纹图案并不是由差异极大的几种颜色组成的，这些颜色往往属于同一色系。

失败方案：没有任何浏览器支持下面这个特性background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);正确方案：不再为每种条纹单独指定颜色，而是把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹background: #58a;background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);

6、复杂的背景图案

背景知识：CSS 渐变，“条纹背景”

CSS3 图案库lea.verou.me/css3patterns

7、伪随机背景

背景知识：CSS 渐变，“条纹背景”，“复杂的背景图案”

大自然不会以“无缝”贴片的方式重复自己......

蝉原则：通过质数来增加随机真实性

蝉渐变图案：条纹图案把不同尺寸的渐变图案叠加起来，并使用质数来增加随机的真实感

background: hsl(20, 40%, 90%);background-image: linear-gradient(90deg, #fb3 11px, transparent 0), linear-gradient(90deg, #ab4 23px, transparent 0), linear-gradient(90deg, #655 41px, transparent 0);background-size: 41px 100%, 61px 100%, 83px 100%;

8、连续的图像边框

背景知识：CSS 渐变，基本的 border-image，“条纹背景”，基本的 CSS 动画案例一：一个元素有一圈装饰性的边框，基本上就是一张图片被裁剪进了边框所在的方环区域。不仅如此，我们还希望这个元素的尺寸在扩大或缩小时，这幅图片都可以自动延伸并覆盖完整的边框区域。

最简单的办法是使用两个HTML 元素：一个元素用来把我们的石雕图片设为背景，另一个元素用来存放内容，并设置纯白背景，然后覆盖在前者之上。问题来了：如果只用一个元素，我们能做到这个效果吗？

解决方案：padding: 1em;border: 1em solid transparent;background:linear-gradient(white, white) padding-box,url(stone-art.jpg) border-box 0 / cover;

案例二；老式信封样式的边框

案例三：蚂蚁行军边框

@keyframes ants { to { background-position: 100% } }.marching-ants {padding: 1em;border: 1px solid transparent;background:linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / .6em .6em;animation: ants 12s linear infinite;}

案例四：边框的裁切效果，用来模拟传统的脚注

border-top: .2em solid transparent;border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);padding-top: 1em;

干货！免费领取腾讯高级讲师网页设计教程

点我领取

☝☝☝

关注网页设计自学平台，99%的努力都在这里

▼无法识别二维码可以点「阅读原文」噢！

年前，粒子动画席卷了网络，并成功地为自己开辟了一个利基市场。当前对具有高科技氛围和几何装饰的设计的巨大痴迷使它们成为当今更受欢迎的解决方案之一。

使用粒子动画给人留下深刻印象
随着时间的推移，技术成熟了。从散落在画布上的杂乱无章的小白点，它变成了一种潜力巨大的工具。这不是什么特别的东西，但它有一定的令人惊叹的因素。此外，它完美地为高科技、几何和商务美学做出了贡献——自然而然地完成了它们。

前提是：粒子动画要给人留下深刻印象。而且，开发人员始终坚持这一假设，充分利用它。让我们考虑一下这个解决方案的真正粉丝创建的一些惊人的代码片段。

NO.1 Justin Windle 的 30,000 个粒子

这里的标题不言自明。船上有 30,000 个粒子，您会期待一些宏伟的东西。贾斯汀温德尔当然达到了我们的期望。他的概念令人难以置信。用你的鼠标到处玩。物理学只是例外。这个版本的粒子动画在开发者中很受欢迎，尽管规模没有那么大。

NO.2 Alex Safayan 在水中的鱼

Alex Safayan 提出了几乎相同的解决方案，但在这种情况下，粒子越来越大。鼠标光标也将这些点推开，形成带有微妙涟漪效果的痕迹。动画的行为让人想起鱼靠近水面时的运动。注意物理学：点之间的相互作用是经过深思熟虑的。

NO.2 浮游生物——Marco Dell'Anna 的粒子生命

获得 2017 年度最受关注项目奖的 Plankton 无疑是值得关注的。该项目不仅着迷于想法，还着迷于实现。从像手套一样适合这里的微妙色彩到看起来令人难以置信的自然的华丽行为，Marco Dell'Anna 对细节有着敏锐的洞察力。

NO.4 Marco Dell'Anna的星尘

我喜欢这里华丽的复古氛围、霓虹灯和华丽的色彩。很难把你的眼睛从它身上移开。Stardust 是设计和编码的共生体，是一部鼓舞人心的杰作。

NO.5 Akimitsu Hamamuro 的重力点

Akimitsu Hamamuro 邀请您在他的游乐场添加所谓的“重力点”。它们侵入点的混乱运动，像磁铁一样拉动它们。虽然它们不扮演轨道中心的角色；然而，它们形成了迫使粒子向其方向移动的焦点。

NO.6 Nate Wiley 的 Particle Orb CSS

如今，球体是英雄区域非常流行的风格选择。Nate Willey 对这一趋势的看法令人印象深刻。由于微小的颗粒，球体看起来很脆弱，同时由于经过深思熟虑的行为而坚固。他分解和重新形成球体的程序非常棒。

NO.7 Kevin Rajaram 的粒子波

Kevin Rajarm 汲取了粒子动画的美丽和优雅，并用Three.js的强大来增强它，带来了一个精致但真正复杂的概念。令人惊叹的海浪景色让人感觉未来主义、人工和迷人。

非正统用途

还有更令人印象深刻的使用粒子动画的方法。让我们走出常规，开箱即用地思考：这种方法很容易使标识和字母等元素受益。

NO.8 Tamino Martinius 的交互式粒子标志

Interactive Particle Logo 就是一个典型的例子。它看起来像是上面提到的 Justin Windle 片段的重新设想的解决方案。虽然没有 30,000 个点，但它由数量惊人的粒子组成，巧妙地组成了“CODEPEN”这个词。这是该概念找到实际用途的案例之一。

NO.9 Louis Hoebregts 的文本到粒子

Louis Hoebregts 在这支笔中提供了先前解决方案的彩色版本。这里的文本是由一千个彩色实心圆圈组成的，这些圆圈通过与上一个示例相同的交互性来丰富。

NO.10 粒子由 Marco Dell'Anna 书写文本

虽然这不是一个戏剧性的入口，但它有一些令人着迷的东西。流畅的动画慢慢揭开人物的面纱，点燃我们的兴趣。这个概念有某种神秘的风格，类似于“陌生人”的介绍。

NO.11 马可·戴尔安娜 (Marco Dell'Anna) 就这样做

这是Marco Dell'Anna的又一杰作。这一次，粒子动画参与塑造了著名的耐克标志。从晦涩、半透明到明快、立体，动画逐渐暴露了标志，不显眼地抓住了整体的注意力。

引人注目的效果

粒子动画是越小越好的情况之一。点越小，可以实现的效果就越令人印象深刻。一方面，由于涉及几何和物理，它看起来很复杂。另一方面，由于精致的形状，它看起来脆弱而微妙。这种独特的融合使粒子动画与众不同且引人注目。

粒子动画在企业网站建设中的运用案例

图片来源：素马设计

文：https://zhuanlan.zhihu.com/p/30487077

本文不会大篇幅介绍装饰器（Decorator）的概念和基础用法，核心介绍我们团队如何将装饰器应用于实际开发，和一些高级用法的实现。

装饰器简介

Decorator 是 ES7 的一个新语法，正如其“装饰器”的叫法所表达的，他可以对一些对象进行装饰包装然后返回一个被包装过的对象，可以装饰的对象包括：类，属性，方法等。Decorator 的写法与 Java 里的注解（Annotation）非常类似，但是一定不要把 JS 中的装饰器叫做是“注解”，因为这两者的原理和实现的功能还是有所区别的，在 Java 中，注解主要是对某个对象进行标注，然后在运行时或者编译时，可以通过例如反射这样的机制拿到被标注的对象，对其进行一些逻辑包装。而 Decorator 的原理和作用则更为简单，就是包装对象，然后返回一个新的对象描述（descriptor），其作用也非常单一简单，基本上就是获取包装对象的宿主、键值几个有限的信息。

简单来说，JS 的装饰器可以用来“装饰”三种类型的对象：类的属性/方法、访问器、类本身，简单看几个例子吧。

针对属性/方法的装饰器

注意这里的 target 对应的是被装饰的属性所属类的原型，如果是装饰一个 A 类的属性，并且 A 类是继承自 B 类的，这时候你打印 target，获取到的是 A.prototype，它的结构是这样的，这里一定要注意：

[image:A944761A-E0FA-4C04-BD90-BE179C46B641-35651-00001223828250C5/187FCC2A-8CC4-46C4-B8A3-A7FD5E0376F6.png]

如果需要操作 target，可能需要搞清楚这个问题。

推荐下我的前端群：524262608，不定期会有干货分享，初学者还有一套整理好的入门教程，欢迎初学者和进阶中的小伙伴。

针对访问操作符的装饰

与属性方法类似，就不详述了。

针对类的装饰

其中的 target 就是类本身（而不是其 prototype）

真实场景应用

今天，我们要介绍的主要是，如何将 Decorator 这个特性应用于数据定义层，实现一些类似于类型检查、字段映射等功能。

关于数据定义层（Model），其实就是应用内出现的各种实体数据的定义，也就是 MVVM 中的 M 层，注意，和 VM 层做好区分，Model 本身不提供数据的管理和流通，只负责定义某个实体本身的属性和方法，例如页面里有一辆车的模块，我们就定义一个 CarModel，它用来描述车辆的颜色、价格、品牌等信息。

关于为什么要在前端应用内定义明确的 Model，这个我之前在知乎上也早有论述，核心几点：

提高可维护性。将数据源头的实体做一个固定而准确的描述，这个对于串联理解整个应用非常重要，特别是在重构或者接手别人的代码的时候，你需要准确的知道一个页面（或者是一个模块）它会包含哪些数据，这些数据分别有哪些字段，这样更便于理解整个应用的数据逻辑。
提高确定性。当你要给你的界面增加几个车辆字段的时候，你不清楚之前是否已经定义过这些字段，服务端是否会返回这些字段，可能要请求一下（并且要有权限取到所有字段）才能知道，但是如果有 model 的明确定义，有什么字段就一目了然了。
提高开发效率。在这一层统一做一些数据映射和类型检查等工作，这也是今天要讲的重点。

以我们团队 RN 开发框架中 Model 部分的实现为例，我们至少提供了三个基础的基于 Decorator 的功能：类型检查，单位转换，字段映射。接下来我会先简单介绍下这几个功能是做什么的，随后介绍如何实现这些 Decorator。

先来看看最终调用时候的代码

可以看到我们有三个自定义的 decorator ：

@Unit, // 单位转换装饰器
@Check, // 类型检查装饰器，
@ServerName // 数据字段映射装饰器，当前后端定义的字段名不一致的时候用

@Unit 是一个比较特殊的装饰器，它的作用是在前后端之间自动转换单位，也就是前端和后端交换某些带单位的数据的时候，会把根据各端的注解和装饰器，把真实值转换成带单位的值传给另一端，然后另一端会在框架层自动转成它定义的单位，以此解决前后端单位不一致，交换数据时混乱导致的问题。

被 @Unit 装饰过的属性，读写的时候都是按照前端的单位读写，然后再转换成 JSON 的时候就会特殊处理成类似 12.3_$wy 这样的格式，表示这个数的单位是万元。

@Check 更为容易理解，就是用来检查字段类型，或者检查字段格式，或者一些自定义检查，例如正则表达式等。

@ServerName 则用来做映射，例如前后端对同一个界面元素的命名不同，这时候不需要完全按照服务端的命名来决定，可以在前端用另外一个属性名，然后将其装饰成服务端的字段名。

基础实现

我们的目标就是实现这几个 Decorator，按照之前对 Decorator 的科普，其实要独立实现这几个功能其实非常简单。

以 @Check 为例，我们改写被包装属性的 descriptor，返回一个新的 descriptor，将被包装属性的 getter 和 setter 重新定义，然后在其调用 setter 的时候先检查传入参数的类型和格式，做一些对应的处理。

非常简单，其他几个 Decorator 的实现也类似，可能像@Unit 这种实现起来会稍显复杂，不过只要在 Decorator 中记住每个属性标注的单位，在序列化的时候获取对应的属性对应的单位然后做转换就可以了。

基础实现的问题

但是，到这里，问题其实还没有完！

我们的确实现了一个可用的 Decorator，但是这些 Decorator 可以叠加使用吗？另外可以和业界常用的一些 Decorator 混用吗？例如 mobx 中的 @ observable。也就是我上面最开始的实例的用法：

@observable@Check(CheckType.String)@ServerName('seller_name')sellerName = '';

如果你按照我刚才的方式实现 @Check 和 @ServerName 的话，你会发现两个致命的问题：

这两个自己实现的 Decorator 首先就没法叠加使用。
这两个 Decorator 都无法和 @observable 这个同时使用。
为什么呢？问题就出在我们改写属性的 getter 和 setter 的实现原理上。首先，每次给一个属性定义 getter 和 setter 都会覆盖前一次的定义，也就是这个动作只能有一次。然后，mobx 的实现非常依赖对 getter 和 setter 的定义

事实上，Decorator 本身叠加使用时没问题的，因为你的每次包装，都会将属性的 descriptor 返回给上一层的包装，最后就是一个函数包函数包函数的效果，最终返回的还是这个属性的 descriptor 。

进阶实现

那我们就需要摒弃掉定义 getter 和 setter 的实现方式。其实除了这种方式，还有很多方式可以实现上述的功能，核心就是一点，在装饰器函数里，将你需要处理的属性和对这个属性需要做的处理的对应关系都记录下来，然后在处理实例化数据和序列化数据的时候，把对应关系取出来，执行相关逻辑即可。

废话不说，我们直接上一种将这个对应关系挂载到类的原型上的一个实现方式。

注意，我前面提到的一个信息，装饰函数的第一个参数 target 是包装属性所属的类的原型（prototype），这个通过看 babel 编译后的结果可以看到。然后我这里为什么将对应关系挂载到 target.constructor 上，是因为我所有的 Model 类，都是继承自我提供的一个 Model 基类的（BaseModel），target 拿到的不是子类的原型，而是基类的原型，target.constructor 拿到的才是最终的子类。也就是我把对应关系挂载到了开发定义的子类上。

接下来看看基类的代码，核心提供两个方法，分别是映射数据和序列化的方法。

在 __map 函数中，我们将当前类（this.constructor）上的对应关系都取出来，然后做数据校验和映射，这里应该不难理解了。

最终应用的代码就是我们开篇贴出来最终使用的代码，只要相应的 Model 类继承自 BaseModel 即可。