この記事では、角丸の border-radius 属性について説明します。 (コードの紹介) には特定の参考値があり、困っている友達はそれを参照できます
多くの Web サイトで角丸の効果がよく見られます。ユーザーエクスペリエンスと心理学の観点から見ると、角が丸い効果はより美しく寛大であることがよくあります。
CSS2.1 では、要素の角を丸くするのは頭の痛い問題です。従来の方法では、背景画像を使用してこれを実現していましたが、作成が比較的面倒でした。しかし、CSS3 での border-radius 属性の登場により、角丸効果を実現するのが難しいという問題は完全に解決されました。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-radius属性</title>
<style type="text/css">
#div1
{
width:100px;
height:50px;
border:1px solid gray;
border-radius:10px;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
