角丸効果を実現するために 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/
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
