corner-inline-start-shape
corner-inline-start-shape CSS 属性指定了盒子行内起始边缘的两个角的形状，在它们的 border-radius 区域内。
有关角形状行为的完整描述和多个示例，请参见 corner-shape 简写属性页面。
构成属性
corner-inline-start-shape 属性是以下物理属性的简写：
语法
css
/* Single keyword value set for both corners */
corner-inline-start-shape: round;
corner-inline-start-shape: bevel;
/* Single superellipse() value set for both corners */
corner-inline-start-shape: superellipse(0.5);
corner-inline-start-shape: superellipse(-3);
/* Block-start/inline-start corner, block-end/inline-start corner */
corner-inline-start-shape: round bevel;
corner-inline-start-shape: round superellipse(0.5);
/* Global values */
corner-inline-start-shape: inherit;
corner-inline-start-shape: initial;
corner-inline-start-shape: revert;
corner-inline-start-shape: revert-layer;
corner-inline-start-shape: unset;
值
corner-inline-start-shape 属性使用一个或两个 <corner-shape-value> 值来指定。
- 如果使用一个值，它指定了两个行内起始角的形状。
- 如果使用两个值，第一个值指定了块起始/行内起始角的形状，第二个值指定了块结束/行内起始角的形状。
正式定义
在数据库中未找到值！正式语法
corner-inline-start-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-inline-start-shape 的基本用法
HTML
此示例的标记包含一个单独的 <div> 元素。
html
<div></div>
CSS
我们为盒子提供了一些基本样式，为了简洁起见我们将其隐藏。我们还应用了 box-shadow，60 像素的 border-radius，以及 square bevel 的 corner-inline-start-shape。
css
div {
box-shadow: 1px 1px 3px gray;
border-radius: 60px;
corner-inline-start-shape: square bevel;
}
结果
渲染结果如下所示：
规范
| 规范 |
|---|
| CSS Borders and Box Decorations Module Level 4 # propdef-corner-inline-start-shape |
浏览器兼容性
加载中…