- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 21 Feb 2012 16:41:35 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css4-background
In directory hutz:/tmp/cvs-serv28677
Modified Files:
Overview.src.html
Log Message:
check in some brainstorming notes
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css4-background/Overview.src.html,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -d -r1.2 -r1.3
--- Overview.src.html 3 Jan 2012 20:37:06 -0000 1.2
+++ Overview.src.html 21 Feb 2012 16:41:33 -0000 1.3
@@ -2047,6 +2047,82 @@
<dd>Border radii define a concave rectangular notch at the corner.
</dl>
+<!--
+<h2 id="partial-borders">
+Partial Borders: the 'border-limit' property</h2>
+
+ <table class=propdef>
+ <tr>
+ <th>Name:
+ <td><dfn>border-parts</dfn>
+ <tr>
+ <th>Value:
+ <td>all | [ sides | corners ] [ <length> | <percentage> ]?
+ | [ top | right | bottom | left ] [ <length> | <percentage> ]
+ <tr>
+ <th>Initial:
+ <td>round
+ <tr>
+ <th>Applies to:
+ <td>all elements, except table element when 'border-collapse' is
+ ''collapse''
+ <tr>
+ <th>Inherited:
+ <td>no
+ <tr>
+ <th>Percentages:
+ <td>relative to border-box
+ <tr>
+ <th>Media:
+ <td>visual
+ <tr>
+ <th>Computed value:
+ <td>as specified
+ </table>
+
+ <p>By default, the entire border is drawn. However, border rendering can be
+ limited to only part of a border. The keyword specifies which part, and
+ the length or percentage specifies how much.
+ <dl>
+ <dt><dfn>''sides''</dfn>
+ <dd>The sides are drawn up to but not including the corners (as defined
+ by the border radii). A length or percentage is measured from the center
+ of each side: ''50%'' draws the middle 50% of the border; by default the
+ entire side is drawn.
+ <dt><dfn>''corners''</dfn>
+ <dd>The corners are drawn plus the specified distance into the sides if
+ specified. A length is measured from the closest edge of the corner area.
+ A percentage is measured from the absolute corner of the border box.
+ <dt><dfn>''left''</dfn>
+ <dt><dfn>''right''</dfn>
+ <dd>For the left and right (vertical) sides, draws the entire side and
+ corner. For the top and bottom (horizontal) sides, draws the left/right
+ portion, as specified. Distances are measured as for ''corners''.
+ <dt><dfn>''top''</dfn>
+ <dt><dfn>''bottom''</dfn>
+ <dd>For the top and bottom (horizontal) sides, draws the entire side and
+ corner. For the left and right (vertical) sides, draws the top/bottom
+ portion, as specified. Distances are measured as for ''corners''.
+ </dl>
+
+ <div class="example">
+ <p>The following example draws only the middle 50% of the sides.</p>
+ <pre>box { border: solid; border-parts: sides 50% }</pre>
+ <p>The following example draws only the curved parts of the corners.</p>
+ <pre>box { border: solid; border-radius: 1em 2em; border-parts: corners; }</pre>
+ <p>The following example draws only the left 4em of the top border.</p>
+ <pre>box { border-top: solid; border-parts: left 4em; }
+ <p>The following example draws only the first 10px of each corner:</p>
+ <pre>box { border: solid; border-parts: corners 10px; }</pre>
+ <p>The following example draws the curved part of the corner plus 5px
+ along ths sides:</p>
+ <pre>box { border: solid; border-radius: 5px; border-shape: scoop; border-parts: corners 5px; }</pre>
+ <p>The following example draws the curved part of the corner and all of
+ the side except the middle 50%.</p>
+ <pre>box { border: solid; border-radius: 5px; border-shape: scoope; border-parts: corners 50%; }</pre>
+ </div>
+-->
+
<h2 id="border-images">
Border Images</h2>
Received on Tuesday, 21 February 2012 16:41:40 UTC