此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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> 值进行指定。
形式定义
| 初始值 | round |
|---|---|
| 适用元素 | 所有元素. It also applies to::first-letter. |
| 是否是继承属性 | 否 |
| 计算值 | The correspondingsuperellipse() value. |
| 动画类型 | Animates as persuperellipse interpolation. |
形式语法
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，以及一个取值为bevel 的corner-top-right-shape。
body { font-family: Arial, Helvetica, sans-serif; width: 240px; margin: 20px auto;}div { width: 100%; height: 180px; display: flex; justify-content: center; align-items: center; background-color: green; 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: 60px; corner-top-right-shape: bevel;}结果
渲染结果如下所示：
规范
| Specification |
|---|
| CSS Borders and Box Decorations Module Level 4 # propdef-corner-top-right-shape |