CSS如何实现渐变提示框（tooltips） css如何实现轮播图

admin web技术 2022-10-19 594浏览 0

本篇文章给大家介绍一下使用CSS如何实现支持渐变的提示框（tooltips）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。

今天来看一种十分常见的交互：提示框（tooltips）。通常提示框都是纯色的，比如下面这个

有时候，为了突出强调产品的特点或者为了跟随设计的潮流，设计会用上渐变背景，比如 lulu UI Edge 版本中的 Tips 组件

二、mask 遮罩

除了 clip-path ，mask 也是一种思路。如果还不熟悉 mask，可以参考这一篇

这里的原理如下

2. 自适应的svg

尽管做了一些优化，上面的代码量仍然非常可观，有没有更加简便的方式呢？

想到了 svg…

一般情况下，svg 路径是固定尺寸的，只能 等比缩放 ，无法做到自适应。不过基本图形是支持自适应的，可以设置百分比尺寸，比如

rx 可以设置矩形的圆角，当不设置 ry 时，默认与 rx 相同

这样一个 svg 是可以自适应的，在改变尺寸的情况下不会变形（注意观察圆角），如下

三、paint 绘制

再来介绍一种未来的解决方式， CSS paint 。关于 CSS paint，又称 “CSS 界的绘图板”，简单来说，就是用 canvas 绘图的方式来绘制背景，canvas 几乎什么都能绘制吧，所以这是一种更为通用的解决方案。想快速了解 CSS paint 的可以参考这一篇入门文章：

不过目前仅支持 Chrome，兼容性如下

另外，也可以通过 CSS 变量进行自定义，比如定义一个–r为圆角大小，–t为三角形大小

registerPaint('tips-bg', class {
  static get inputProperties() { // 定义允许的自定义属性
    return [
      '--r',
      '--t'
    ]
  }
  paint(ctx, size, properties) { // properties为自定义属性
    const radius = Number(properties.get('--r'));
    const edge = Number(properties.get('--t'));
    // ...
  }
})

可以看到绘制是实时更新的（改变圆角），无需 JS 额外处理，实时效果如下

五、总结和说明

以上针对 tooltips 布局共介绍了3种不同类型的实现方式，分别是 clip-path、mask、CSS paint。其中 mask 的实现重点其实是CSS图形的绘制，主要有渐变和 svg 两种，虽然渐变的写法稍微复杂一点，但是最为通用，其他方式可能换一种布局就不适用了。现在总结一下要点：