@butterfail/尾风-倒置-radius
用于 Tailwind CSS v3.2+ 的插件,该插件提供公用设施为元素创建倒转角.
安装
从 npm 安装插件 :
npm install @butterfail/tailwindcss-inverted-radius
然后将插件添加到您的 tailwind.config.js 文件 :
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@butterfail/tailwindcss-inverted-radius'),
// ...
],
}
使用量
插件提供了用于为元素创建倒转圆角的功能类.
它为每个角分别指定圆角的大小产生分级.
合并 inv-rad 财务报告和审定财务报表 inv-rad-{n} 分类以指定元素的倒转半径 :
<div class="inv-rad inv-rad-4">
<!-- ... -->
</div>
使用 inv-rad-0 删除任何倒转半径行为 :
<div class="inv-rad inv-rad-4 lg:inv-rad-0">
<!-- ... -->
</div>
您可以通过添加来选择特定的角大小 inv-rad-{corner-position}-{n}。 。 。 .
下列位置角值:
| 名称 | 类 |
|---|---|
top | .inv-rad-t-{n} |
right | .inv-rad-r-{n} |
bottom | .inv-rad-b-{n} |
left | .inv-rad-l-{n} |
top right | .inv-rad-t-r-{n} |
top left | .inv-rad-t-l-{n} |
bottom right | .inv-rad-b-r-{n} |
bottom left | .inv-rad-b-l-{n} |
兼容性
该插件使用 CSS 遮罩属性来创建倒转圆角 .
虽然这种方法得到广泛支持,但测试与您的目标浏览器的相容性始终是一个好的做法.
| CSS 财产 | 参考文献 |
|---|---|
| "任务图像" | 罐头用 |
| "任务定位" | 罐头用 |
| "任务模式" | 罐头用 |
| "任务起源" | 罐头用 |
| "任务剪接" | 罐头用 |
| "任务组合" | 罐头用 |
| "任务重复" | 罐头用 |
| "任务大小" | 罐头用 |
配置
默认情况下,我们与 尾风间距 配置 .
您可以配置此插件的可用值 invRad 键 tailwind.config.js 文件 :
// tailwind.config.js
module.exports = {
theme: {
extend: {
invRad: {
4.5: '1.125rem',
},
},
},
}
许可证
这个插件根据麻省理工学院许可证获得许可. 见 自由主义 详细文件.