CSS2 による Box-Shadow の表示テスト
:after、:before などへの content プロパティによる内容の使いに対応している User Agent (具体的には mozilla 1.0 以降 opera7 beta1 など) は、制作者者の意図通り、この文書の表題をこのように
表示できるかもしれません。
HTML Code.
body 要素以下の該当部 code は以下の通りである。特に div、span などの style container を必要としない。
<body>
<div>
<h1>CSS2 による Box-Shadow の表示テスト。</h1>
<p>:after、:before などへの content プロパティによる内容の使いに対応している User Agent (具体的には mozilla 1.0 以降 opera7 beta1 など) は、制作者者の意図通り、この文書の表題をこのように<img alt="h1 要素が浮き出て、背景に対して斜め右下に影ができているように" src="graphics/box-shadow.png" />表示できるかもしれません。</p>
(中略)
</body>CSS.
@charset "Shift_JIS";
body{
color:#444455 !important;background-color:#EEEEDD !important;margin:1em !important;
}
h1{
font-size:120% !important;padding:0 !important;margin:0 !important;width:100% !important;min-width:1em !important;text-align:center !important;
border-style:none !important;
border-right:solid 0.5em #000000 !important;color:#000000 !important;background-color:white !important;
}
h1:before, h1:after{
content:"" !important;display:block !important;height:0.5em !important;width:100% !important;min-width:1em !important;
}
h1:before{
border-right:solid 0.5em #EEEEDD !important;color:black !important;background-color:white !important;
}
h1:after{
border-left :solid 0.5em #EEEEDD !important;color:black !important;background-color:#000000 !important;
}