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(/upload/course/000/000/006/58a4feb498981164.png) 30 30 round; /* Safari 5 and older */
            -o-border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 round; /* Opera */
            border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 round;
        }
        #stretch
        {
            -webkit-border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch; /* Safari 5 and older */
            -o-border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch; /* Opera */
            border-image:url(/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="http://www.runoob.com/images/border.png" />
</body>
</html>

프로그램을 실행해서 사용해 보세요

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전