CSS3 border-radius プロパティを使用すると、任意の要素に「丸い角」を作成できます。border-radius プロパティを使用すると、次のルールを使用できます。
(1) 4 つの値: 最初の値は左上隅、2 番目の値は右上隅、3 番目の値は右下隅、4 番目の値は左下隅 (2) 3 つの値: 最初の値値は左上隅、2 番目の値は右上隅と左下隅、3 番目の値は右下隅 (3) 2 つの値: 最初の値は左上隅と右下隅、 2 番目の値は右上隅と左下隅です (4) 1 つの値: 4 つのフィレット値は同じです
グラフィックスに丸い角の効果を持たせたい場合は、border-radius 属性を 1 つ追加するだけで済みます。非常に丸いものにしたい場合は、この値を増やします。
<!DOCTYPE html>
<html>
<頭>
<meta charset="UTF-8">
<title>ホームページ</title>
<スタイル>
ディビジョン{
幅: 100ピクセル;
高さ: 100ピクセル;
背景色: rgb(151, 26, 49);
境界半径: 10px;
}
画像{
幅: 100ピクセル;
高さ: 100ピクセル;
境界半径: 10px;
}
</スタイル>
</head>
<本文>
<div>
<img src="../vue/1.jpg">
</div>
</body>
</html>丸くしたい場合は、100% と書きます。
ボックスシャドウの影効果
margin: 0 auto: 上下を制御する必要がなく、左右のスペースを均等に配置し、ボックスを中央に配置します。左右のスペース間のギャップを均等に分散させるのが自動の機能です。
0は水平方向に影がないことを意味し、2番目の0は垂直方向に影がないことを意味し、3番目は影のぼかしを意味します。
<!DOCTYPE html>
<html>
<頭>
<meta charset="UTF-8">
<title>ホームページ</title>
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
ディビジョン{
幅: 500ピクセル;
高さ: 500ピクセル;
背景色: 緑黄;
マージン: 0 自動;
ボックスシャドウ: 0 0 50px rgba(0, 0, 0, 0.5);
}
</スタイル>
</head>
<本文>
<div class="d1">
</div>
</body>
</html>新しい CSS3 機能 box-shadow シャドウ効果とrounded border-radius に関するこの記事はこれで終わりです。新しい CSS3 機能 box-shadow の詳細については、downcodes.com で以前の記事を検索するか、以下の関連記事を参照してください。今後、downcodes.com をさらにサポートする予定です。