CSS3 테두리


CSS3를 사용하면 Photoshop과 같은 디자인 프로그램을 사용하지 않고도 둥근 테두리를 만들고 그림자 상자와 이미지를 테두리로 추가할 수 있습니다.

이 장에서는 다음 테두리 속성에 대해 배우게 됩니다. CSS가 추가됨 2 모서리를 둥글게 만드는 것은 까다롭습니다. 우리는 구석구석마다 다른 이미지를 사용해야 했습니다.

    CSS3에서는 둥근 모서리를 쉽게 만들 수 있습니다.

  • CSS3에서는 border-radius 속성을 사용하여 둥근 모서리를 만듭니다.

    • 이것은 둥근 테두리입니다!

  • Example
  • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
	border:2px solid #a1a1a1;
	padding:10px 40px; 
	background:#dddddd;
	width:300px;
	border-radius:25px;
}
</style>
</head>
<body>

<div>border-radius 属性允许您为元素添加圆角边框！ </div>

</body>
</html>

    • 예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

CSS3 상자 그림자

CSS3의 box-shadow 속성은 그림자를 추가하는 데 사용됩니다.

Example

<!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 #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

CSS3 테두리 이미지

CSS3 border-image 속성을 사용하면 테두리를 만들 수 있습니다 이미지 사용:

border-image 속성을 사용하면 이미지를 테두리로 지정할 수 있습니다! 위의 테두리를 만드는 데 사용된 원본 이미지:

div의 이미지를 사용하여 테두리 만들기:


Instance

<!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(../style/images/border.png) 30 30 round; /* Safari 5 and older */
	-o-border-image:url(../style/images/border.png) 30 30 round; /* Opera */
	border-image:url(../style/images/border.png) 30 30 round;
}

#stretch
{
	-webkit-border-image:url(../style/images/border.png) 30 30 stretch; /* Safari 5 and older */
	-o-border-image:url(../style/images/border.png) 30 30 stretch; /* Opera */
	border-image:url(../style/images/border.png) 30 30 stretch;
}
</style>
</head>
<body>

<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>

<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>

<p>这是我们使用的图片素材：</p>
<img src="/images/border.png" />

</body>
</html>

Run Instance»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

새 테두리 속성

Border