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 속성을 사용하면 이미지를 테두리로 지정할 수 있습니다!
<!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>프로그램을 실행해서 사용해 보세요
- 코스 추천
- 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~ 