ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSの角丸枠コードの書き方は? (コード例)
この記事では主にCSSの枠線効果を実現する方法を紹介します。
CSS の丸みを帯びた境界線コードの具体的な例は次のとおりです:
<!DOCTYPE HTML> <html lang="en"> <head> <title>css圆角边框代码实例</title> <meta charset="UTF-8"> <style type="text/css"> div { color: white; text-align:center; border:2px solid #a1a1a1; padding:10px 40px; background: #029789; width:350px; border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ } </style> </head> <body> <div>css边框设置使用border-radius 属性即可向元素添加圆角。</div> </body> </html>
効果は以下のとおりです:
ここで関係する主な属性は border-radius で、CSS の丸みを調整するために使用できます。境界機能。
注: border-radius の使用方法:
border-radius: 1-4 length|% / 1-4 length|%;
各半径の 4 つの値をこの順序で設定します。左下を省略した場合は右上と同じになります。右下を省略した場合は左上と同じになります。 top-right を省略した場合は、top-left と同じになります。
-webkit-border-radius は、Chrome または Safari との互換性のためのものです。
-moz-border-radius は Firefox との互換性のためのものです。
上記はCSSの角丸枠コードの詳細な紹介です。必要としている友人に役立つことを願っています。
以上がCSSの角丸枠コードの書き方は? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。