CSS3の境界線
CSS3 境界線
CSS3 を使用すると、丸い境界線を作成したり、シャドウ ボックスを追加したりできます
この章では、次の境界線のプロパティについて学習します
| プロパティ | 説明 | CSS |
|---|---|---|
| border-image | すべての境界線画像の短縮プロパティを設定します。 | 33 |
| CSS3 の角丸 | ||
| CSS2 で角丸を追加するのは難しいです。隅々まで異なる画像を使用する必要がありました。 | CSS3では角丸を簡単に作成できます。 | border-radius プロパティは CSS3 で丸い角を作成するために使用されます: |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:2px solid #4269e1;
padding:10px 40px;
background: #d8dd2e;
width:150px;
border-radius:25px;
}
</style>
</head>
<body>
<div>圆角边框！</div>
</body>
</html>プログラムを実行して試してください
CSS3 box-shadow
影CSS3 のプロパティを使用して影を追加しました: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #47d1b1;
text-align: center;
}
</style>
</head>
<body>
<div>CSS3盒阴影</div>
</body>
</html>プログラムを実行して試してみましょう
CSS3 境界線画像
CSS3 border-image プロパティを使用すると、画像を使用して境界線を作成できます: border-image プロパティを使用すると、境界線として画像を指定できます。 えー
プログラムを実行して試してください
