You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
alt="The sample code above would create a 100px×100px orange box with a 12px blue border,
883
+
whose top right / bottom left corners are sharp and tob left / bottom right corners are elliptically curved.
884
+
Two shadows are created: an inner one, which due to its offset and spread creates a 20px-wide band of darker orange along the top and left sides of the box (curving to match the rounded top left border shape);
885
+
and an outer one, creating a 204px×204px gray duplicate of the shape seemingly behind the box,
886
+
offset 24px down and 24px to the right of the box's top and left edges.
887
+
Applying the 12px blur radius to the outer shadow creates a gradual shift from the shadow color to transparent along its edges
888
+
which is visibly apparent for 24px centered along the edge of the shadow.">
889
+
890
+
891
+
892
+
893
+
Shadow Shape, Spread, and Knockout
894
+
895
+
An outer box-shadow casts a shadow as if the border-box of the element were opaque.
896
+
Assuming a spread distance of zero, its perimeter has the exact same size and shape as the border box.
897
+
The shadow is drawn outside the border edge only:
898
+
it is clipped inside the border-box of the element.
899
+
900
+
An inner box-shadow casts a shadow as if everything outside the padding edge were opaque.
901
+
Assuming a spread distance of zero, its perimeter has the exact same size and shape as the padding box.
902
+
The shadow is drawn inside the padding edge only:
903
+
it is clipped outside the padding box of the element.
904
+
905
+
If a spread distance is defined, the shadow perimeter defined above
906
+
is expanded outward (for outer box-shadows) or contracted inward (for inner box-shadows)
907
+
by outsetting (insetting, for inner shadows) the shadow's straight edges by the spread distance
908
+
(and flooring the resulting width/height at zero).
909
+
910
+
911
+
Below are some examples of an orange box with a blue border being
912
+
given a drop shadow.
913
+
914
+
915
+
916
+
917
+
border:5px solid blue;
919
+
background-color:orange;
920
+
width: 144px;
921
+
height: 144px;
923
+
924
+
border-radius: 20px;
925
+
926
+
border-radius: 0;
927
+
928
+
929
+
box-shadow:
931
+
rgba(0,0,0,0.4)
932
+
10px 10px;
934
+
935
+
936
+
alt="A round-cornered box with a light gray shadow the same shape
937
+
as the border box offset 10px to the right and 10px down
938
+
from directly underneath the box.">
939
+
940
+
941
+
alt="A square-cornered box with a light gray shadow the same shape
942
+
as the border box offset 10px to the right and 10px down
943
+
from directly underneath the box.">
944
+
945
+
946
+
box-shadow:
948
+
rgba(0,0,0,0.4)
949
+
10px 10px
950
+
inset
952
+
953
+
954
+
alt="A round-cornered box with a light gray shadow the inverse shape
955
+
of the padding box filling 10px in from the top and left edges
956
+
(just inside the border).">
957
+
958
+
959
+
alt="A square-cornered box with a light gray shadow the inverse shape
960
+
of the padding box filling 10px in from the top and left edges
961
+
(just inside the border).">
962
+
963
+
964
+
box-shadow:
966
+
rgba(0,0,0,0.4)
967
+
10px 10px 0
968
+
10px /* spread */
970
+
971
+
972
+
alt="A round-cornered box with a light gray shadow the same shape
973
+
as the box but 20px taller and wider and offset so that the
974
+
top and left edges of the shadow are directly underneath the
975
+
top and left edges of the box.">
976
+
977
+
978
+
alt="A square-cornered box with a light gray shadow the same shape
979
+
as the box but 20px taller and wider and offset so that the
980
+
top and left edges of the shadow are directly underneath the
981
+
top and left edges of the box.">
982
+
983
+
984
+
box-shadow:
986
+
rgba(0,0,0,0.4)
987
+
10px 10px 0
988
+
10px /* spread */
989
+
inset
991
+
992
+
993
+
alt="A round-cornered box with a light gray shadow the inverse shape
994
+
of the box but 20px narrower and shorter filling 20px in from
995
+
the top and left edges (just inside the border).">
996
+
997
+
998
+
alt="A round-cornered box with a light gray shadow the inverse shape
999
+
of the box but 20px narrower and shorter filling 20px in from
1000
+
the top and left edges (just inside the border).">
1001
+
1002
+
1003
+
1004
+
1005
+
To preserve the box's shape when spread is applied,
1006
+
the corner radii of the shadow are also increased (decreased, for inner shadows)
1007
+
from the border-box (padding-box) radii by adding (subtracting)
1008
+
the spread distance (and flooring at zero).
1009
+
However, in order to create a sharper corner when the border radius is small
1010
+
(and thus ensure continuity between round and sharp corners),
1011
+
when the border radius is less than the spread distance
1012
+
(or in the case of an inner shadow,
1013
+
less than the absolute value of a negative spread distance),
1014
+
the spread distance
1015
+
is first multiplied by the proportion 1 + (r-1)3,
1016
+
where r is the ratio of the border radius to the spread distance,
1017
+
in calculating the corner radii of the spread shadow shape.
1018
+
For example, if the border radius is 10px and the spread distance is 20px (r = .5),
1019
+
the corner radius of the shadow shape will be 10px + 20px × (1 + (.5 - 1)3) = 27.5px
1020
+
rather than 30px.
1021
+
This adjustment is applied independently to the radii in each dimension.
1022
+
1023
+
The 'border-image' does not affect the shape of the box-shadow.
1024
+
1025
+
1026
+
Blurring Shadow Edges
1027
+
1028
+
A non-zero blur radius indicates that the resulting shadow should
1029
+
be blurred, such as by a Gaussian filter. The exact algorithm is not
1030
+
defined; however the resulting shadow must approximate (with each pixel
1031
+
being within 5% of its expected value) the image that would be generated
1032
+
by applying to the shadow a Gaussian blur with a standard deviation equal
1033
+
to half the blur radius
1034
+
1035
+
Note this means for a long, straight shadow edge, the
1036
+
blur radius will create a visibly apparent color transition approximately
1037
+
the twice length of the blur radius that is perpendicular to and centered
1038
+
on the shadow's edge, and that ranges from almost the full shadow color at the
1039
+
endpoint inside the shadow to almost fully transparent at the endpoint outside it.
1040
+
1041
+
1042
+
Layering, Layout, and Other Details
1043
+
1044
+
The shadow effects are applied front-to-back:
1045
+
the first shadow is on top and the others are layered behind.
1046
+
Shadows do not influence layout and may overlap (or be overlapped by)
1047
+
other boxes and text or their shadows.
1048
+
In terms of stacking contexts and the painting order,
1049
+
the outer box-shadows of an element are drawn immediately below the background of that element,
1050
+
and the inner shadows of an element are drawn immediately above the background of that element
1051
+
(below the borders and border image, if any).
1052
+
1053
+
If an element has multiple boxes, all of them get drop shadows,
1054
+
but shadows are only drawn where borders would also be drawn;
1055
+
see 'box-decoration-break'.
1056
+
1057
+
Shadows do not trigger scrolling or increase the size of the scrollable area.
1058
+
1059
+
Outer shadows have no effect on internal table elements in the collapsing border model.
1060
+
If a shadow is defined for single border edge in the collapsing border model
1061
+
that has multiple border thicknesses
1062
+
(e.g. an outer shadow on a table where one row has thicker borders than the others,
1063
+
or an inner shadow on a rowspanning table cell that adjoins cells with different border thicknesses),
1064
+
the exact position and rendering of its shadows are undefined
0 commit comments