8000 add draft of border-image box-shadows · w3c/csswg-drafts@fdba95b · GitHub
Skip to content

Commit fdba95b

Browse files
fantasaifantasai
committed
add draft of border-image box-shadows
1 parent 0482207 commit fdba95b

2 files changed

Lines changed: 75 additions & 9 deletions

File tree

‎css3-background/Overview.html‎

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@
2222

2323
<h1>CSS Backgrounds and Borders Module Level 3</h1>
2424

25-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 31 July 2009</h2>
25+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 August 2009</h2>
2626

2727
<dl>
2828
<dt>This version:
2929

30-
<dd><!-- <a href="http://www.w3.org/TR/2009/WD-css3-background-20090731">http://www.w3.org/TR/2009/WD-css3-background-20090731</a></dd> -->
30+
<dd><!-- <a href="http://www.w3.org/TR/2009/WD-css3-background-20090801">http://www.w3.org/TR/2009/WD-css3-background-20090801</a></dd> -->
3131
<a
3232
href="http://dev.w3.org/csswg/css3-background">http://dev.w3.org/csswg/css3-background</a>
3333

@@ -3600,10 +3600,44 @@ <h3 id=the-box-shadow><span class=secno>6.3 </span>The &lsquo;<code
36003600
<p>If the box has a nonzero <span class=property>&lsquo;<code
36013601
class=property><a
36023602
href="#border-radius">border-radius</a></code>&rsquo;</span>, the shadow
3603-
is rounded in the same way. If an element has multiple boxes, all of them
3604-
get drop shadows, but shadows are only drawn where borders would also be
3605-
drawn, see &lsquo;<code class=property><a
3606-
href="#border-break">border-break</a></code>&rsquo;.
3603+
is rounded in the same way.
3604+
3605+
<div class=issue>
3606+
<p><strong>This is still <a
3607+
href="http://lists.w3.org/Archives/Public/www-style/2009Jul/0120.html">under
3608+
discussion</a>. Please send comments to www-style.</strong></p>
3609+
3610+
<p>However, if the box has a border-image, the shadows drawn differently:
3611+
they are masked by the border-image instead of the border area as
3612+
follows.
3613+
3614+
<ul>
3615+
<li>For an outer shadow, the shadow is created by assuming that the
3616+
padding box is opaque, and then combining that with the border-image to
3617+
create an alpha-channel mask for the shadow. Spread values are
3618+
interpreted as increasing the size of the padding box and causing the
3619+
border-image mask to be resized accordingly (keeping the number of
3620+
border-image tiles in each region constant). The resulting shadow is
3621+
only drawn outside the boundaries of the padding box.
3622+
3623+
<li>For an inner shadow, the shadow is created by assuming that
3624+
everything outside the border box is opaque, and then combining that
3625+
with the border-image to create an alpha-channel mask for the shadow.
3626+
Spread values are interpreted as decreasing the size of the border box
3627+
and causing the border-image mask to be resized accordingly (keeping the
3628+
number of border-image tiles in each region constant). The resulting
3629+
shadow is only drawn inside the boundaries of the border box.
3630+
</ul>
3631+
3632+
<p>If the UA is unable to create shadows that respect the transparent and
3633+
partially-transparent aspects of the border-image, it must not create a
3634+
shadow at all. The UA <em>may</em> ignore spread values when drawing
3635+
shadows for a border-image.</p>
3636+
</div>
3637+
3638+
<p>If an element has multiple boxes, all of them get drop shadows, but
3639+
shadows are only drawn where borders would also be drawn, see &lsquo;<code
3640+
class=property><a href="#border-break">border-break</a></code>&rsquo;.
36073641

36083642
<p>The shadow effects are applied front-to-back: the first shadow is on top
36093643
and the others are layered behind. Shadows do not influence layout and may

‎css3-background/Overview.src.html‎

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2629,9 +2629,41 @@ <h3 id="the-box-shadow">The 'box-shadow' property</h3>
26292629
it is not drawn outside the padding box of the element.
26302630

26312631
<p>If the box has a nonzero <span class="property">'border-radius'</span>,
2632-
the shadow is rounded in the same way. If an element has multiple boxes,
2633-
all of them get drop shadows, but shadows are only drawn where borders
2634-
would also be drawn, see 'border-break'.
2632+
the shadow is rounded in the same way.
2633+
2634+
<div class="issue">
2635+
2636+
<p><strong>This is still <a href="http://lists.w3.org/Archives/Public/www-style/2009Jul/0120.html">under discussion</a>.
2637+
Please send comments to www-style.</strong></p>
2638+
2639+
<p>However, if the box has a border-image, the shadows drawn differently:
2640+
they are masked by the border-image instead of the border area as follows.
2641+
2642+
<ul>
2643+
<li>For an outer shadow, the shadow is created by assuming that the
2644+
padding box is opaque, and then combining that with the border-image
2645+
to create an alpha-channel mask for the shadow. Spread values are
2646+
interpreted as increasing the size of the padding box and causing
2647+
the border-image mask to be resized accordingly (keeping the number
2648+
of border-image tiles in each region constant).
2649+
The resulting shadow is only drawn outside the boundaries of the padding
2650+
box.
2651+
<li>For an inner shadow, the shadow is created by assuming that everything
2652+
outside the border box is opaque, and then combining that with the
2653+
border-image to create an alpha-channel mask for the shadow. Spread values
2654+
are interpreted as decreasing the size of the border box and causing
2655+
the border-image mask to be resized accordingly (keeping the number of
2656+
border-image tiles in each region constant).
2657+
The resulting shadow is only drawn inside the boundaries of the border box.
2658+
</ul>
2659+
<p>If the UA is unable to create shadows that respect the transparent
2660+
and partially-transparent aspects of the border-image, it must not create
2661+
a shadow at all. The UA <em>may</em> ignore spread values when drawing
2662+
shadows for a border-image.</p>
2663+
</div>
2664+
2665+
<p>If an element has multiple boxes, all of them get drop shadows, but
2666+
shadows are only drawn where borders would also be drawn, see 'border-break'.
26352667

26362668
<p>The shadow effects are applied front-to-back: the first shadow is
26372669
on top and the others are layered behind. Shadows do not influence

0 commit comments

Comments
 (0)