ホームページ > 記事 > ウェブフロントエンド > CSSの角丸枠コードの書き方は？ (コード例)
CSSの角丸枠コードの書き方は？ (コード例)
- 藏色散人オリジナル
- 2018-08-13 16:52:514365ブラウズ
この記事では主に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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。