語法
/* Initial value */
ry: auto;
/* Length and percentage values */
ry: 30px;
ry: 30%;
/* Global values */
ry: inherit;
ry: initial;
ry: revert;
ry: revert-layer;
ry: unset;
值
<length>、<percentage> 或 auto 關鍵字值表示橢圓的垂直半徑和矩形圓角的垂直邊框半徑。
<length>-
絕對或相對長度可以使用 CSS
<length>資料型別允許的任何單位表示。負值無效。 <percentage>-
百分比是指當前 SVG 視口的高度。
<rect>的使用值永遠不會超過矩形高度的 50%。 auto-
當設定為或預設為
auto時，ry值等於用於rx的絕對長度值。如果ry和rx的計算值都為auto，則使用值為0。
正式定義
正式語法
ry =
<length-percentage> |
auto
<length-percentage> =
<length> |
<percentage>
示例
建立圓角
此示例演示如何透過將 ry 屬性應用於 SVG <rect> 元素來建立圓角矩形。
HTML
我們包含一個帶有四個 <rect> 元素的 SVG 影像；所有矩形都相同，除了它們的 x 屬性值，它將它們沿 x 軸定位。
<svg xmlns="http://www.w3.org/2000/svg">
<rect width="50" height="120" y="5" x="5" />
<rect width="50" height="120" y="5" x="60" />
<rect width="50" height="120" y="5" x="115" />
<rect width="50" height="120" y="5" x="170" />
<rect width="50" height="120" y="5" x="225" />
</svg>
CSS
使用 CSS，我們為四個矩形設定了一個 ry 值
svg {
border: 1px solid;
}
rect:nth-of-type(2) {
ry: 10px;
fill: red;
}
rect:nth-of-type(3) {
ry: 2em;
fill: blue;
}
rect:nth-of-type(4) {
ry: 5%;
fill: orange;
}
rect:nth-of-type(5) {
ry: 80%;
fill: green;
}
結果
第一個矩形預設為 auto；由於此示例中的所有 rx 值也預設為 auto，因此 ry 的使用值為 0。紅色和藍色矩形分別具有 10px 和 2em 的圓角。由於 SVG 視口預設為 300px x 150px，橙色矩形的 5% 值建立了一個 7.5px 的半徑。綠色矩形設定為 ry: 80%。然而，由於 ry 的值永遠不會超過矩形高度的 50%，因此效果就像設定了 ry: 50%; rx: 50% 一樣。
定義橢圓的垂直半徑
這個基本的 <ellipse> 示例演示了 CSS ry 屬性優先於 SVG ry 屬性來定義形狀的垂直半徑。
HTML
我們在一個 SVG 中包含兩個相同的 <ellipse> 元素；每個元素的 ry 屬性都設定為 20。
<svg xmlns="http://www.w3.org/2000/svg">
<ellipse cx="80" cy="50" rx="40" ry="20" />
<ellipse cx="80" cy="50" rx="40" ry="20" />
</svg>
CSS
我們只對第一個橢圓進行樣式設定，讓它的孿生兄弟使用預設使用者代理樣式（fill 預設為黑色）。幾何 ry 屬性會覆蓋 SVG ry 屬性的值。我們還設定了 fill 和 stroke 屬性，以區分帶樣式的形狀和它的孿生兄弟。
svg {
border: 1px solid;
}
ellipse:first-of-type {
ry: 80px;
fill: magenta;
stroke: rebeccapurple;
}
結果
帶樣式的橢圓的垂直半徑為 80px，如 CSS ry 屬性值中所定義。未帶樣式的橢圓的垂直半徑為 20px，由 ry 屬性定義。
橢圓垂直半徑百分比值
此示例演示了對 ry 使用百分比值。
HTML
我們使用與上一個示例相同的標記。
<svg xmlns="http://www.w3.org/2000/svg">
<ellipse cx="80" cy="50" rx="40" ry="20" />
<ellipse cx="80" cy="50" rx="40" ry="20" />
</svg>
CSS
CSS 與上一個示例相似，唯一的區別是 ry 屬性值；在這種情況下，我們使用百分比值。
svg {
border: 1px solid;
}
ellipse:first-of-type {
ry: 30%;
fill: magenta;
stroke: rebeccapurple;
}
結果
當對 ry 使用百分比值時，這些值是相對於 SVG 視口高度的。此處，帶樣式的橢圓垂直半徑的大小是當前 SVG 視口高度的 30%。由於高度預設為 150px，因此 ry 值為 45px，使橢圓高 90px。
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # RY |
瀏覽器相容性
載入中…
另見
- 幾何屬性：
ry、cx、cy、r、rx、x、y、height、height fillstrokepaint-orderborder-radius簡寫屬性radial-gradient<basic-shape>資料型別- SVG
ry屬性