CSS border 属性不支持渐变...

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名
43 0 0 2022-09-23

避免与前端工程师互殴指南(三)


前情介绍:




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

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票