此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

corner-top-right-shape

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

CSS 属性 corner-top-right-shape 用于指定盒子右上角在 border-radius 区域内的形状。

如需了解角形状行为的完整说明和更多示例,请参见 corner-shape 简写属性页面。

语法

css
/* 关键字值 */
corner-top-right-shape: scoop;
corner-top-right-shape: square;

/* superellipse() 函数值 */
corner-top-right-shape: superellipse(2.2);
corner-top-right-shape: superellipse(-2.5);

/* 全局值 */
corner-top-right-shape: inherit;
corner-top-right-shape: initial;
corner-top-right-shape: revert;
corner-top-right-shape: revert-layer;
corner-top-right-shape: unset;

corner-top-right-shape 属性使用 <corner-shape-value> 值进行指定。

形式定义

在数据库中找不到该值!

形式语法

corner-top-right-shape = 
<corner-shape-value>

<corner-shape-value> =
round |
scoop |
bevel |
notch |
square |
squircle |
<superellipse()>

<superellipse()> =
superellipse( <number [-∞,∞]> |
infinity |
-infinity )

示例

你可以在 corner-shape 参考页面找到其他相关示例。

基础 corner-top-right-shape 用法

HTML

此示例的标记只包含单个 <div> 元素。

html
<div></div>

CSS

我们为这个盒子提供了一些基础样式(这里为了简洁已省略),并且应用了 box-shadow、60 像素的 border-radius,以及一个取值为 bevelcorner-top-right-shape

css
div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 60px;
  corner-top-right-shape: bevel;
}

结果

渲染结果如下所示:

规范

Specification
CSS Borders and Box Decorations Module Level 4
# propdef-corner-top-right-shape

浏览器兼容性

参见