CSS3の角が丸い
CSS3 角丸
CSS3 border-radius プロパティ
CSS3 border-radius プロパティを使用すると、任意の要素に「角丸」を作成できます。
例
ここに丸い角の 3 つの例があります
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网(php.cn)</title> <style> #rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 25px; background: url(/upload/course/000/000/006/5809800b44336872.jpg); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <p> border-radius 属性允许向元素添加圆角。</p> <p>指定背景颜色元素的圆角:</p> <p id="rcorners1">圆角</p> <p>指定边框元素的圆角:</p> <p id="rcorners2">圆角</p> <p>指定背景图片元素的圆角:</p> <p id="rcorners3">圆角</p> </body> </html>
プログラムを実行して試してください
CSS3 border-radius - それぞれの丸い角を指定します
境界線内にいる場合- radius 属性 値を 1 つだけ指定すると、4 つのフィレットが生成されます。
ただし、四隅を 1 つずつ指定したい場合は、次のルールを使用できます:
4 つの値: 最初の値は左上隅、2 番目の値は右上隅、3 番目の値はは右下隅、4 番目の値は左下隅です。 3 つの値: 最初の値は左上隅、2 番目の値は右上隅と左下隅、3 番目の値は右下隅です。 2 つの値: 最初の値は左上隅と右下隅です。コーナー、2 番目の値は、右上コーナーと左下コーナーの 1 つの値です: 4 つのフィレット値は同じです
以下は 3 つの例です:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网(php.cn)</title> <style> #rcorners4 { border-radius: 15px 50px 30px 5px; background: #f2f732; padding: 20px; width: 200px; height: 150px; } #rcorners5 { border-radius: 15px 50px 30px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners6 { border-radius: 15px 50px; background: #ffaacd; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <p>四个值 - border-radius: 15px 50px 30px 5px:</p> <p id="rcorners4"></p> <p>三个值 - border-radius: 15px 50px 30px:</p> <p id="rcorners5"></p> <p>两个值 - border-radius: 15px 50px:</p> <p id="rcorners6"></p> </body> </html>
プログラムを実行して試してください
楕円のコーナーを作成します
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网(php.cn)</title> <style> #rcorners7 { border-radius: 50px/15px; background: #f2f77e; padding: 20px; width: 200px; height: 150px; } #rcorners8 { border-radius: 15px/50px; background: #57fff0; padding: 20px; width: 200px; height: 150px; } #rcorners9 { border-radius: 50%; background: #ff9b41; padding: 20px; width: 200px; height: 150px; } </style> </head> <body> <p>椭圆边框 - border-radius: 50px/15px:</p> <p id="rcorners7"></p> <p> 椭圆边框 - border-radius: 15px/50px:</p> <p id="rcorners8"></p> <p>椭圆边框 - border-radius: 50%:</p> <p id="rcorners9"></p> </body> </html>
プログラムを実行して試してください