CSS3の境界線

CSS3 境界線

CSS3 を使用すると、丸い境界線を作成したり、シャドウボックスを追加したりできます

この章では、次の境界線のプロパティについて学習します

プロパティ	説明	CSS
border-image	すべての境界線画像の短縮プロパティを設定します。	3
		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 プロパティを使用すると、境界線として画像を指定できます。えー

プログラムを実行して試してください

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网（php.cn)</title> <style> div { border:15px solid transparent; width:250px; padding:10px 20px; } #round { -webkit-border-image:url(https://img.php.cn/upload/course/000/000/006/58a4feb498981164.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(https://img.php.cn/upload/course/000/000/006/58a4feb498981164.png) 30 30 round; /* Opera */ border-image:url(https://img.php.cn/upload/course/000/000/006/58a4feb498981164.png) 30 30 round; } #stretch { -webkit-border-image:url(https://img.php.cn/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch; /* Safari 5 and older */ -o-border-image:url(https://img.php.cn/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch; /* Opera */ border-image:url(https://img.php.cn/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch; } </style> </head> <body> <p> border-image 属性用于设置图片的边框。</p> <div id="round">这里，图像平铺（重复）来填充该区域。</div> <br> <div id="stretch">这里，图像被拉伸以填充该区域。</div> <p>这是我们使用的图片素材：</p> <img src="https://img.php.cn/upload/course/000/000/006/58a4feb498981164.png" /> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear