前情介绍：

01#背景与问题

从前从前有个设计师设计了一个渐变背景，大概长这样

看起来很简单，就是渐变圆角矩形带上一个描边而已

但是！

用 border 实现出来的效果如下

啊这...

02# CSS border 属性

如图 border 属性支持渐变、支持圆角，但...不支持渐变圆角

03#解决方案

简单来说有两种

第一种：套娃

这里牵扯出一个细节问题，如图下两个矩形的 radius 数值都为 12 ，但实现出来并不符合伪描边的效果

为了保证落地效果与设计图一致，需要针对 radius 的数值进行调整，直至调整到想要达到的效果

第二种：切图

就不用多介绍了，把描边整出来丢给前端完事

04#好站分享

分享五个日常使用的工具类网站：

1. 你还在为栅格计算而头秃吗！！！推荐拯救发量的栅格计算网站
http://grid.guide/

2. 色盲模拟器，不多解读了，增加用户体验必备

https://eng.m.fontke.com/tool/rgb/17,17,17

3.常用！！图片比例计算器
https://www.shejidaren.com/examples/tools/aspect/index.html

4.网页设计可能会用上的一个网站，看看当前浏览器的尺寸
http://howbigismybrowser.com/?ref=designresourc.es

5.超椭圆一键生成
https:// https://squircley.app/?ref=undesign

完~

公众号：柠檬设计笔记

Powered by Froala Editor