- 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