W3C home > Mailing lists > Public > public-css-commits@w3.org > February 2012

csswg/css4-background Overview.src.html,1.2,1.3

From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
Date: Tue, 21 Feb 2012 16:41:35 +0000
To: public-css-commits@w3.org
Message-Id: <E1RzsmV-0007T0-8L@lionel-hutz.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 ] [ &lt;length&gt; | &lt;percentage&gt; ]?
+        | [ top | right | bottom | left ] [ &lt;length&gt; | &lt;percentage&gt; ]
+    <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

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:44:50 UTC