CSS border 属性不支持渐变圆角描边怎么办
深圳/设计爱好者/3年前/194浏览
版权
CSS border 属性不支持渐变圆角描边怎么办
避免与前端工程师互殴指南(三)
前情介绍:
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://https://www.shejidaren.com/examples/tools/aspect/index.html
4.网页设计可能会用上的一个网站,看看当前浏览器的尺寸
http://howbigismybrowser.com/?ref=designresourc.es
5.超椭圆一键生成
https:// https://squircley.app/?ref=undesign
完~
公众号:柠檬设计笔记
5
Report
声明
收藏
Share
相关推荐
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
You may like
相关收藏夹
Log in
5Log in and synchronize recommended records
收藏Log in and add to My Favorites
评论Log in and comment your thoughts
分享Share



















































































