之前有一个头像渐变边框的需求，当时是全部用的切图，但是不同的地方可能头像大小不一样，切图适配性太差，正好这几日学了下css渐变的各种妙用，想到之前的头像边框其实可以用渐变来实现。

怎么给图片加边框？在设计或编辑图片时，加上边框可以使其更加美观，让图片更加凸显。边框可以为图片增加一定的质感和层次感，让图片看起来更加有深度。此外，边框还能够起到引导眼球的作用，让观众更加关注图片的主体内容。下面分享三种简单易行的方法。

方法一：使用Photoshop

Photoshop是一款非常强大的图像处理软件，可以为图片添加各种效果，包括边框。以下是具体步骤：

最近做的项目有张设计图如下

需要给列表加上标号和连线，跟物流信息图有点类似，实现思路是2、3、4添加完整的左边框，1、5添加一半左边框。完整左边框好说，用border-left就能实现，但是一半的边框怎么实现呢？第一时间想到的是用边框渐变或者伪类来实现。

1. 边框渐变

首先我们了解一下border-image 的相关属性值

在建企业网站时使用CSS边框圆角是很容易的事，但要设置边框圆角的渐变效果就需要费些功夫了，需要正确理解几个CSS属性的含义，background-origin,background-clip,background-size这几个是必须用到的，调整好性能的数值就可以灵活运用了。

想要实现CSS圆角渐变并匹配内容背景图可以参考以下代码：

要给视频加边框，可以使用Vue的样式绑定功能来实现。

首先，在Vue组件的模板中，可以使用`<video>`标签来嵌入视频，然后通过设置样式来给视频加边框。例如：

```html

<template>

<div class="video-container">

今天，有个群友问了我这么一个问题，如果不想切图，是否有办法实现带渐变边框的字体效果？如下所示：

本文，就将尝试一下，在 CSS 中，我们可以如何尽可能的实现这种渐变边框字体效果。

元素叠加

首先，比较容易想到的写法是通过元素叠加实现。

接下来我们来实现这个功能，就是点一下，这里会出现一个黄色的边框。

这个功能怎么实现？其实很简单，总共分两步。

1. 第一步就是要能够区分出来鼠标左键到底点的是哪个坤，这个功能这里已经实现了，fists[i]就是点下去的坤坤。

2. 第二步其实可以这么去玩，先不用 js，先搞一个 CSS 去玩一下，切回自己写的页面，然后这样子，img 这边也给它搞一个标识，也就是 class，比如叫 notclicked，没有被点击的，然后这个东西复制过来。

今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样：

这个我们使用 CSS 还是可以轻松解决的，代码也很简单，核心代码：

div {
border-radius: 25px;
border: 2px dashed #aaa;
}

      <view class="certificateContent">
        <view class="certificateName">
        </view>
        <view class="certificateCode">
          <view class="code">
          </view>
        </view>
      </view>