1. 需求UI设计

最外层有个圆角渐变的边框

2. 问题

乍一看挺简单，直接用border-image实现渐变效果, border-radius 实现圆角效果就行了

border-image: linear-gradient(360deg, rgba(159, 231, 253.4700044989586, 0.5), rgba(159, 231, 253, 0), rgba(160, 231, 253, 0)) 1 1;
border-radius: 10px;

实际上，渐变的效果可以出来，但是圆角就没有了。使用border-image的时候，border-radius不起作用。

搜索一下，解决方式大概有三种： 1是使用clip-path 切一圈，使边框看起来像圆角： clip-path: inset(0px round 10px); 2使用所谓“巧妙”的方式： 用两个容器（其中一个可以使伪类），一个内部的一个外部的，用内部的盖住外部的，将外部的背景色伪装成边框。 3使用背景图片。

解决方式1: 边框很粗，并且只有外部是圆角，丑陋

解决方式2: 麻烦且背景不透明

只能用3了。 3的问题不是技术上的，是人事上的，UI大哥忙，而且觉得蓝湖上有css代码，你怎么就画不出来？

3. 实现

用svg画一个。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
 <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
   <stop offset="0%" style="stop-color:rgba(159, 231, 253);stop-opacity:0" />
   <stop offset="100%" style="stop-color:rgb(159, 231, 253);stop-opacity:0.5" />
 </linearGradient>
</defs>
<rect width="450" height="506" style="fill:rgba(0,0,255,0);stroke-width:1;stroke:url(#grad1)" rx="10" ry="10" />
</svg>

把代码保存为 border.svg 然后找到这个在线压缩svg的工具 传上去，把base64编码拷出来 加个背景图片，搞定

background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYmEoMTU5LDIzMSwyNTMpIiBzdG9wLW9wYWNpdHk9IjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5ZmU3ZmQiIHN0b3Atb3BhY2l0eT0iLjUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDUwIiBoZWlnaHQ9IjUwNiIgcng9IjEwIiByeT0iMTAiIGZpbGw9InRyYW5zcGFyZW50IiBzdHJva2U9InVybCgjYSkiLz48L3N2Zz4=") no-repeat center;

4. 总结

svg的写法跟html+css还挺像。看似简单的东西上面都可能有坑。