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
,以及一个取值为 bevel
的 corner-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> |
浏览器兼容性
Loading…