Skip to content

Commit 55401fd

Browse files
committed
[css-round-display] Update the devcie-radius description(3)
1 parent 392bd76 commit 55401fd

2 files changed

Lines changed: 2 additions & 2 deletions

File tree

css-round-display/Overview.bs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ By the mechanism of media queries, if the value of the 'device-radius' media fea
6868
Note: To define a '<code>range</code>' type media feature, the feature may be written as a normal media feature, but with a '<code>min-</code>' or '<code>max-</code>' prefix on the feature name. '<code>min-</code>' or '<code>max-</code>' prefixes express 'greater or equal to' or 'smaller or equal to' constraints respectively.
6969
</p>
7070
<p>
71-
The length or percentage value of the '<code>device-radius</code>' property defines a radius of a quarter ellipse in terms of the shape of the corner of the outer screen edge (This is similar to the '<code>border-radius</code>' property. See the 'border-radius' description). If the length is zero, the shape of screen is a rectangle, otherwise it is a rectangle with rounded corners or a circle or an ellipse. A percentage value of the '<code>device-radius</code>' is proportional to a width and a height of the screen, which affects a horizontal radius of the screen and a vertical radius of the screen each. If the screen shape is the regular circle, '<code>device-radius</code>': 50% has a true value since a half of the width(=height) of the regular circle is the radius of the screen shape. In case of an ellipse with 200x100, '<code>device-radius</code>': 50% means that horizontal-radius of the screen is 100px and vertical-radius of the screen is 50px. It can't be described in length, not percentage. A negative value is not allowed.
71+
The length or percentage value of the '<code>device-radius</code>' property defines a radius of a quarter ellipse in terms of the shape of the corner of the outer screen edge (This is similar to the '<code>border-radius</code>' property. See the 'border-radius' description). If the length is zero, the shape of screen is a rectangle, otherwise it is a rectangle with rounded corners or a circle or an ellipse. A percentage value of the '<code>device-radius</code>' is proportional to a width and a height of the screen, which have relevance to a horizontal radius and a vertical radius of the screen according to the length of width and height of the screen each. If the screen shape is the regular circle, '<code>device-radius</code>': 50% has a true value since a half of the width(=height) of the regular circle is the radius of the screen shape. In case of an ellipse with 200x100, '<code>device-radius</code>': 50% means that horizontal-radius of the screen is 100px and vertical-radius of the screen is 50px. It can't be described in length, not percentage. A negative value is not allowed.
7272
</p>
7373

7474
<div class='example'>

css-round-display/Overview.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ <h3 class="heading settled" data-level="3.1" id="device-radius-media-feature"><s
208208
<td>range
209209
</table>
210210
<p class="note" role="note"> Note: To define a '<code>range</code>' type media feature, the feature may be written as a normal media feature, but with a '<code>min-</code>' or '<code>max-</code>' prefix on the feature name. '<code>min-</code>' or '<code>max-</code>' prefixes express 'greater or equal to' or 'smaller or equal to' constraints respectively. </p>
211-
<p> The length or percentage value of the '<code>device-radius</code>' property defines a radius of a quarter ellipse in terms of the shape of the corner of the outer screen edge (This is similar to the '<code>border-radius</code>' property. See the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-radius">border-radius</a> description). If the length is zero, the shape of screen is a rectangle, otherwise it is a rectangle with rounded corners or a circle or an ellipse. A percentage value of the '<code>device-radius</code>' is proportional to a width and a height of the screen, which affects horizontal radius of the screen and vertical radius of the screen each. If the screen shape is the regular circle, '<code>device-radius</code>': 50% has a true value, because a half of the width(=height) of the regular circle is the radius of the screen shape. In case of an ellipse with 200x100, '<code>device-radius</code>': 50% means that horizontal-radius of the screen is 100px and vertical-radius of the screen is 50px. It can’t be described in length, not percentage. A negative value is not allowed. </p>
211+
<p> The length or percentage value of the '<code>device-radius</code>' property defines a radius of a quarter ellipse in terms of the shape of the corner of the outer screen edge (This is similar to the '<code>border-radius</code>' property. See the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-radius">border-radius</a> description). If the length is zero, the shape of screen is a rectangle, otherwise it is a rectangle with rounded corners or a circle or an ellipse. A percentage value of the '<code>device-radius</code>' is proportional to a width and a height of the screen, which have relevance to a horizontal radius and a vertical radius of the screen according to the length of width and height of the screen each. If the screen shape is the regular circle, '<code>device-radius</code>': 50% has a true value since a half of the width(=height) of the regular circle is the radius of the screen shape. In case of an ellipse with 200x100, '<code>device-radius</code>': 50% means that horizontal-radius of the screen is 100px and vertical-radius of the screen is 50px. It can’t be described in length, not percentage. A negative value is not allowed. </p>
212212
<div class="example" id="example-b86f6e0c">
213213
<a class="self-link" href="#example-b86f6e0c"></a> The example below shows how a web page looks in the different shapes of displays. This is a simple clock written in HTML. (without <a class="property" data-link-type="propdesc" href="#descdef-media-device-radius">device-radius</a>)
214214
<pre>&lt;!DOCTYPE html>

0 commit comments

Comments
 (0)