From 60367cb41ff3291f2d5c1a03feeb26645c7cd336 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 16 Nov 2021 23:03:12 +0900 Subject: CSS 論理的プロパティのボックスモデルのプロパティを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/border-start-start-radius/index.md | 111 +++++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 files/ja/web/css/border-start-start-radius/index.md (limited to 'files/ja/web/css/border-start-start-radius/index.md') diff --git a/files/ja/web/css/border-start-start-radius/index.md b/files/ja/web/css/border-start-start-radius/index.md new file mode 100644 index 0000000000..90d99c3411 --- /dev/null +++ b/files/ja/web/css/border-start-start-radius/index.md @@ -0,0 +1,111 @@ +--- +title: border-start-start-radius +slug: Web/CSS/border-start-start-radius +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - border-start-start-radius + - 'recipe:css-property' + - writing modes +translation_of: Web/CSS/border-start-start-radius +--- +

{{CSSRef}}

+ +

border-start-start-radius は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応付けられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。

+ +
/* <length> 値 */
+/* 値1つの場合は角を円にする */
+border-start-start-radius: 10px;
+border-start-start-radius: 1em;
+
+/* 値2つの場合は角を楕円にする */
+border-start-start-radius: 1em 2em;
+
+/* グローバル値 */
+border-start-start-radius: inherit;
+border-start-start-radius: initial;
+border-start-start-radius: unset;
+
+ +

このプロパティは、要素の block-start と inline-start の間の角に影響します。すなわち、書字方向が horizontal-tb で ltr の方向であれば、 {{CSSxRef("border-top-left-radius")}} プロパティに対応します。

+ +

構文

+ +

値

+ +
+
<length-percentage>
+
円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

縦書きの時の境界の丸め

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-start-start-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-start-start-radius: 10px;
+}
+ +

結果

+ +

{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}{{Spec2("CSS Logical Properties")}}Initial definition.
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.border-start-start-radius")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf