@ cssints/ squircle (英语)
弯曲角为 点缀,作为一个链条成员 cssints/plugin scope(): 本国
corner-shape: squircle 目标所在处(Chrome 139),以及一个CSS口罩,在缺乏时切入相同的曲线
这个 没有脚本.
import { bg, cn, hover } from "cssints" with { type: "cssints" };
import { squircle } from "@cssints/squircle" with { type: "cssints" };
export const icon = cn(squircle().radius("24px"), bg("tomato"));
export const card = cn(squircle(), hover(squircle().radius("2rem")));
@layer _.k {
._squircle-core {
border-radius: var(--squircle-r);
corner-shape: squircle;
--squircle-r: 1rem;
}
/* only when a browserslist target lacks corner-shape (Firefox, Safari today) */
@supports not (corner-shape: squircle) {
._squircle-core {
--squircle-m: url("data:image/svg+xml,%3Csvg … viewBox='-1 -1 2 2' preserveAspectRatio='none'%3E%3Cpath d='M1 0C1 .92 .92 1 0 1…Z'/%3E%3C/svg%3E");
border-radius: 0;
mask:
var(--squircle-m) 0 0 / min(2 * var(--squircle-r), 100%) min(2 * var(--squircle-r), 100%)
no-repeat,
var(--squircle-m) 100% 0 / … no-repeat,
var(--squircle-m) 0 100% / … no-repeat,
var(--squircle-m) 100% 100% / … no-repeat,
linear-gradient(#000 0 0) 50% / 100% max(0px, 100% - 2 * var(--squircle-r)) no-repeat,
linear-gradient(#000 0 0) 50% / max(0px, 100% - 2 * var(--squircle-r)) 100% no-repeat;
}
}
}
@layer _.a {
._c2r73i {
--squircle-r: 24px;
}
}
@layer _.b {
._1xgz4ts:hover {
--squircle-r: 2rem;
}
}
浏览器
- 土著 (单位:千美元)
css.properties.corner-shape.squircle: Chrome139 (英语). Firefox和Safari只预览它; Playwright的WebKit建设已经拥有了. - 倒计时 仅为 CSS 运行时间( X)
polyfills: ["css.properties.corner-shape", "css.properties.corner-shape.squircle"], (中文(简体) ), 所以只有在浏览器列表目标缺少功能时,它才出现在工作表中@supports not放在浏览器里 这是它。 内核requires警告是属于它的。 这需要mask与var()财务报告和审定财务报表min()编号 :max()大小: Firefox 75, Safari 15.4(灯光CSS没有前缀一个值与var()) (中文(简体) ). - 已检查 在克罗梅、火狐和WebKit中
bun run test:browsers:一个盒子的角和边缘从一个 屏幕截图,只为Chrome 139的一栋建筑,为Firefox和Safari的一栋建筑corner-shape切开 (面具一个人). 在两者运行的地方,口罩的40px角是1600(Chrome)和0(WebKit)的原生一到2像素.
为什么是面具
- A 类 油漆工作表 (单位:千美元)css-houdini- squircle (英语), (中文(简体) ),
额外cs) 只在铬中运行,而铬有
corner-shape现在:将涵盖否 缺少该功能的浏览器,它会传送一个脚本. - 平面
border-radius无成本( 浏览器下降)corner-shape并保持半径,但角是 圆:在同一半径上,它沿着对角线(半径0.29对0.16)截取了近两倍的深 读作另一种形状. - 面具 是形状本身,无论大小,没有脚本:超椭圆形的 SVG
|x|⁴ + |y|⁴ = 1(单位:千美元)corner-shape: squircle实值superellipse(2)),曲线0.5%以内为四立方,以两次为四角 半径,以及linear-gradient他们之间 每个角地层是小盒子的一圈,所以他们 与波段结合是元素的相接;大小通过百分比跟随元素,没有测量.
规则
radius(<length-percentage [0,∞]>),一次,可选(1rem) (中文(简体) ). 它设置--squircle-r,所以它工作在一个 条件(hover(squircle().radius("2rem"))) (中文(简体) ). 每一方的百分比,如border-radius(椭圆角); 半径超过半个盒子 被浏览器在原地夹住min(…, 100%)戴着面具.- 没有遗产. 内核集
--squircle-r所以另一只里面的一只小熊 拥有自己的半径. - 冲突.
squircle()设置角: acn()拿着它,一个border-*radius或者说corner-*属性为 a 构建错误, 来源于内核( 写为样式) :cssints: squircle: kernel core sets border-radius, corner-shape (this style also sets border-top-left-radius)设置 半径为radius()。 。 。 . - 错误 语法,在类型和建设时间:
squircle.radius: unexpected "-4px" in "-4px", expected <length-percentage [0,∞]>。 。 。 .
限制
- 面具夹住外侧的外形. 倒计时a
box-shadow,一个outline(焦点环)和 一个角落border被切:边框被平方画出并被口罩去修剪,因此在角上会变薄. 拿着 包件上的阴影( e)filter: drop-shadow()随口而出,或内出一环. 原生道路将它们沿着 曲线. - 一种形状:没有
superellipse(k)平滑,没有光圈光度或形状。 面具是SVG的,另一个会 每个值成为另一个 SVG( 构建时间)url()以定制的地产,等待使用. mask属于后退: amask自己用平板电脑替换掉头的.
cd packages/squircle && bun run test # fixtures through the engine (output for both kinds of targets, conflicts, errors)
cd packages/squircle && bun run typecheck # and the type test (test/types)
cd packages/squircle && bun run test:browsers # Chrome, Firefox and WebKit through playwright-core
贷项
曲线为CSS边框和箱型装饰 第4级的上椭圆(CSS Borders and Box Dercorations Level 4)corner-shape: squircle) (中文(简体) ). 面具画了
这里; 没有复制 .