「縞模様の枠線」を立体的に装飾する
枠線自体を立体的に見せるには、borderプロパティで指定した枠線の色を工夫します。
div.stripe {
background-image: url("stripe.gif");
padding: 5px;
width: 240px;
border-width: 1px;
border-style: solid;
border-color: #008000 #ccffcc #ccffcc #008000;
}
div.stripe p {
background-color: white;
margin: 0px;
padding: 0.3em;
border-width: 1px;
border-style: solid;
border-color: #ccffcc #008000 #008000 #ccffcc;
}
background-image: url("stripe.gif");
padding: 5px;
width: 240px;
border-width: 1px;
border-style: solid;
border-color: #008000 #ccffcc #ccffcc #008000;
}
div.stripe p {
background-color: white;
margin: 0px;
padding: 0.3em;
border-width: 1px;
border-style: solid;
border-color: #ccffcc #008000 #008000 #ccffcc;
}
上記のスタイルシートを、先ほどのHTMLに対して適用すると、以下のように見えます。
ボックスの中身です。
反対に、枠線自体を凹ませて見せる場合は、div要素に対する線色とp要素に対する線色を入れ替えます。
div.stripe {
background-image: url("stripe.gif");
padding: 5px;
width: 240px;
border-width: 1px;
border-style: solid;
border-color: #ccffcc #008000 #008000 #ccffcc;
}
div.stripe p {
background-color: white;
margin: 0px;
padding: 0.3em;
border-width: 1px;
border-style: solid;
border-color: #008000 #ccffcc #ccffcc #008000;
}
background-image: url("stripe.gif");
padding: 5px;
width: 240px;
border-width: 1px;
border-style: solid;
border-color: #ccffcc #008000 #008000 #ccffcc;
}
div.stripe p {
background-color: white;
margin: 0px;
padding: 0.3em;
border-width: 1px;
border-style: solid;
border-color: #008000 #ccffcc #ccffcc #008000;
}
上記のスタイルシートを、先ほどのHTMLに対して適用すると、以下のように見えます。
ボックスの中身です。
いかがでしょうか。なかなか目立つ、凝った枠線が作れたと思います。
最後のページで、今回ご紹介したソースをまとめて掲載し、どこの値を修正すれば何が変わるのかを一覧でご紹介しておきます。 自由にカスタマイズする際の参考にして下さい。
