ホームページ >ウェブフロントエンド >htmlチュートリアル >box-shadow 属性を使用して角を丸くするコード例effect_html/css_WEB-ITnose
box-shadow 属性を使用して角を丸くするコード例effect_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:27:011336ブラウズ
角丸効果を実現するために box-shadow 属性を使用するコード例:
通常、角丸効果を実現するために border-radius を使用します。実際、box-shadow 属性を使用してそれを実現することもできます。
2 つの属性の具体的な使用方法については、ここでは紹介しません。詳細については、次の 2 つの記事を参照してください。
(1) 角丸効果については、角丸効果を実現するための CSS3 の章を参照してください。
(2). box-shadow については、CSS3 の box-shadow 属性の詳しい使い方の章を参照してください。
コード例:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.antzone{ margin:100px; width:100px; height:100px; border-radius:1px; box-shadow:0 0 0 30px #cd0000;}</style></head><body><div class="antzone"></div></body></html> 上記のコードは要件を実現しています。以下に簡単に紹介します。
要素の長さと幅を 100 ピクセルに設定し、境界半径の値を 1 ピクセルに設定します。これは、要素自体に特定の角丸効果があることを意味します。これはもちろん便利です。
box-shadow の値が::0 0 0 0 #cd0000 の場合、影は要素と一致します。
ただし、拡張効果を 30px に設定すると、外側に 30px 拡張され、角丸効果が明らかになります。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=18266
詳細については、以下を参照してください: http://www.softwhy.com/divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。