css3边框颜色渐变

秒速五厘米 2022-09-11 00:27 258阅读 0赞

# 前言 #

边框（border），平时最常用的样式之一，它可以设置宽度、样式和颜色。以前需求都比较单纯，颜色使用单色就能满足要求，但是现在不一样了，用户审美提高了，要求就三点：好看！好看！还是TM的好看！OK，那么话不多说，直接进入正文。

# 正文 #

首先，对边框的颜色测试了线性渐变函数，发现果然是不支持的  
![在这里插入图片描述][a1edaff7d6e0468dba7f59f3f72650a9.png]

## 伪类 ##

这里选择使用伪类元素来实现效果  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16]  
代码如下

.btn { 
    	position: relative;
    	color: #23b7cb;
    	font-size: 15px;
    	padding: 5px 15px;
    	background: #fff;
    	border-style: hidden;
    	border-radius: 30px;
    }
    
    .btn:after { 
    	content: '';
    	position: absolute;
    	top: -2px;
    	bottom: -2px;
    	left: -2px;
    	right: -2px;
    	background: linear-gradient(to right, #0396ff, #21f7e8);
    	border-radius: 30px;
    	z-index: -1;
    }

## 边框图片（border-image） ##

`border-image`，顾名思义：指定边框的图片，这里可以传入线性渐变函数来实现渐变效果  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
代码如下

.btn { 
    	color: #23b7cb;
    	font-size: 15px;
    	padding: 5px 15px;
    	border: 2px transparent solid;
    	border-image: linear-gradient(to right, #0396ff, #21f7e8) 1 10;
    }

虽然实现了渐变效果，但是它只能实现直角边框，无法使用border-radius来实现圆角效果，随后我查询到了 `clip-path` 裁剪属性，效果如下  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
代码如下

.btn { 
    	color: #23b7cb;
    	font-size: 15px;
    	padding: 5px 15px;
    	border: 4px transparent solid;
    	border-image: linear-gradient(to right, #0396ff, #21f7e8) 1 10;
    	clip-path: inset(0 round 4px);
    }

clip-path的更多用法请自行百度

[a1edaff7d6e0468dba7f59f3f72650a9.png]: /images/20220829/89bdf8d1c9bf4660b219134ddff36787.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/59c146828f7845559cd705d73ba1fd2e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/c6251220f3f54e3ab70ad9e35c6b19c2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAc3VuZGR5X3g_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/5c7796eb204b43b6b82bf36c794fd934.png