此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
corner-block-end-shape
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
corner-block-end-shapeCSS 属性用于指定盒子块末边上两个边角在border-radius 区域内的边角形状。
关于边角形状行为的完整说明及更多示例，请参阅corner-shape 简写属性页面。
组成属性
corner-block-end-shape 属性是以下物理属性的简写形式：
语法
css
/* 为两个边角同时设置单个关键字值 */corner-block-end-shape: square;corner-block-end-shape: scoop;/* 为两个边角同时设置单个 superellipse() 值 */corner-block-end-shape: superellipse(3.5);corner-block-end-shape: superellipse(-1.9);/* 块末/行首边角、块末/行末边角 */corner-block-end-shape: square scoop;corner-block-end-shape: square superellipse(-1.9);/* 全局值 */corner-block-end-shape: inherit;corner-block-end-shape: initial;corner-block-end-shape: revert;corner-block-end-shape: revert-layer;corner-block-end-shape: unset;值
corner-block-end-shape 属性使用一个或两个<corner-shape-value> 值进行指定：
- 使用一个值时该值会应用于两个块末边角。
- 使用两个值时，第一个值应用于块末/行首边角，第二个值应用于块末/行末边角。
形式定义
| 初始值 | 该简写所对应的每个属性：
|
|---|---|
| 适用元素 | 所有元素. It also applies to::first-letter. |
| 是否是继承属性 | 否 |
| 计算值 | 该简写所对应的每个属性：
|
| 动画类型 | 该简写所对应的每个属性：
|
形式语法
corner-block-end-shape =
<'corner-top-left-shape'>{1,2}
<corner-top-left-shape> =
<corner-shape-value>
<corner-shape-value> =
round|
scoop|
bevel|
notch|
square|
squircle|
<superellipse()>
<superellipse()> =
superellipse(<number>|
infinity|
-infinity)
示例
你可以在corner-shape 参考页面找到更多相关示例。
基础corner-block-end-shape 用法
HTML
此示例的标记包含一个<div> 元素。
html
<div></div>CSS
我们为这个盒子设置了一些基础样式（为简洁起见未在示例中展示）。此外，我们还应用了box-shadow，将border-radius 设为80px / 40px，并将corner-block-end-shape 设置为notch square。
body { font-family: "Helvetica", "Arial", sans-serif; width: 240px; margin: 20px auto;}div { width: 100%; height: 180px; display: flex; justify-content: center; align-items: center; background-color: cyan; background-image: linear-gradient( to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.5) );}css
div { box-shadow: 1px 1px 3px gray; border-radius: 80px / 40px; corner-block-end-shape: notch square;}结果
渲染后的效果如下所示：
规范
| Specification |
|---|
| CSS Borders and Box Decorations Module Level 4 # propdef-corner-block-end-shape |