CSS - border-start-start-radius 屬性

CSS 的border-start-start-radius 屬性定義元素的塊起始和內聯起始邊之間角的圓角半徑。此屬性是一個邏輯邊框半徑，這意味著其值取決於元素的書寫模式、方向和文字方向。

語法

border-start-start-radius: 0 | length | percentage | initial | inherit;

屬性值

值	描述
0	沒有圓角效果。預設值。
長度	使用長度值定義塊起始和內聯起始角的圓角。
百分比	使用百分比值定義塊起始和內聯起始角的圓角。
初始	將屬性設定為其預設值。
繼承	從父元素繼承屬性。

CSS 邊框起始起始半徑示例

以下示例使用不同的值說明了border-start-start-radius 屬性。

值為零的邊框起始起始半徑屬性

為了在塊起始和內聯起始角處不產生任何圓角效果，我們可以使用 0。在以下示例中，使用了 0 值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-box {
         padding:20px;
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-start-start-radius: 0;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-start-radius property
   </h2>
   <div class="rounded-box">
      No rounded corner for block-start and inline-start corner.
   </div>
</body>

</html>

使用長度值的邊框起始起始半徑屬性

為了在塊起始和內聯起始角處產生圓角效果，我們可以使用長度值（例如 10px、20px 30px 等）指定圓角。在以下示例中，使用了長度值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .boxes {
         width: 150px;
         height: 150px;
         padding: 25px;
         border: 3px solid red;
      }

      .rounded-box1 {
         border-start-start-radius: 80px;
      }

      .rounded-box2 {
         border-start-start-radius: 80px 80px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-start-radius property
   </h2>
   <h3>
   Single Value: 80px (The corner will be a circle)
   </h3>
   <p class="boxes rounded-box1">
      Rounded corner for block-start and
      inline-start corner with single value.
   </p>
   <h3>
   Two Values: 80px 80px (The corner will be an ellipse)
   </h3>
   <p class="boxes rounded-box2">
      Rounded corner for block-start and
      inline-start corner with two values.
   </p>
</body>

</html>

使用百分比值的邊框起始起始半徑屬性

為了在塊起始和內聯起始角處產生圓角效果，我們可以使用百分比值（例如 10%、20% 30% 等）指定圓角。在以下示例中，使用了百分比值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .boxes {
         width: 150px;
         height: 150px;
         padding: 25px;
         border: 3px solid red;
      }

      .rounded-box1 {
         border-start-start-radius: 50%;
      }

      .rounded-box2 {
         border-start-start-radius: 50% 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-start-radius property
   </h2>
   <h3>
   Single Value: 50% (The corner will be a circle)
   </h3>
   <p class="boxes rounded-box1">
      Rounded corner for block-start and
      inline-start corner with single value.
   </p>
   <h3>
      Two Values: 50% 50% (The corner will be an ellipse)
   </h3>
   <p class="boxes rounded-box2">
      Rounded corner for block-start and
      inline-start corner with two values.
   </p>
</body>

</html>

帶方向的邊框起始起始半徑屬性

在border-start-start-radius 上下文中，direction 引數決定要圓角的哪個角。在 LTR 方向中，左上角被圓角化，而在 RTL 方向中，右上角被圓角化。LTR 是預設方向。這些在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .boxes {
         width: 150px;
         height: 150px;
         padding: 25px;
         border: 3px solid red;
         border-start-start-radius: 120px 60px;
      }

      .right {
         direction: ltr;
      }

      .left {
         direction: rtl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-start-radius property
   </h2>
   <h3>
      Left-to-Right direction: top left corner is rounded
   </h3>
   <p class=" boxes right">
      block-start and inline-start 
      rounded corner using direction: ltr
   </p>
   <h3>
      Right-to-Left direction: top right corner is rounded
   </h3>
   <p class="boxes left">
      block-start and inline-start 
      rounded corner using direction: rtl
   </p>
</body>

</html>

帶書寫模式的邊框起始起始半徑屬性

border-start-start-radius 屬性可與writing-mode: vertical-lr 一起使用，它將文字垂直排列，從上到下，從左到右。類似地，使用writing-mode: vertical-rl，它將文字垂直排列，從上到下，從右到左。這些在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-box {
         width: 150px;
         height: 150px;
         padding: 25px;
         border: 3px solid red;
         margin: 10px;
         border-start-start-radius: 30%;
      }

      .top-left-lr {
         writing-mode: vertical-lr;
      }

      .top-left-rl {
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-start-radius property
   </h2>
   <h3>
   Writing mode: vertical-lr
   </h3>
   <div class="rounded-box top-left-lr">
      block-start and inline-start rounded corner
      using vertical-lr.
   </div>
   <h3>
   Writing mode: vertical-rl
   </h3>
   <div class="rounded-box top-left-rl">
      block-start and inline-start rounded corner
      using vertical-rl.
   </div>
</body>

</html>

注意：border-start-start-radius 屬性最多可以接受兩個值，因此，根據傳遞的值的數量，將確定角的圓角。

一個值：如果為屬性提供一個值，則塊起始和內聯起始處的角將為圓形。
兩個值：如果為屬性提供兩個值，則塊起始和內聯起始處的角將為橢圓形。

支援的瀏覽器

屬性
border-start-start-radius	89.0	89.0	66.0	15.0	75.0

css_properties_reference.htm

列印頁面