오늘 우리는 CSS3의 테두리에 대해 주로 공부합니다. 이것은 우리에게 몇 번이나 border:1px solid red라고 썼는지... 그렇다면 CSS3는 우리에게 어떤 놀라움을 가져다줄까요?
CSS3의 테두리에는 4가지 새로운 기능이 있습니다
테두리 색상(테두리 색상 설정)
테두리 이미지( 다음으로 설정) 이미지를 통한 테두리)
Border-radius(테두리 반경)
box-shadow(그림자 효과)
CSS3를 사용하면 디자인 프로그램을 사용하지 않고도 둥근 테두리 만들기, 그림자 상자 및 이미지를 테두리로 추가할 수 있습니다.
CSS3 둥근 테두리-반경 속성
CSS3 둥근 모서리에는 border-radius("테두리 반경"을 의미) 속성 하나만 설정하면 됩니다. 네 모서리의 반경을 동시에 설정하려면 이 속성에 값을 제공합니다. em, ex, pt, px, 백분율 등 모든 합법적인 CSS 측정을 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:yellow;
width:300px;
height:300px;
border-radius:25px 15px 40px 0;
}
</style>
</head>
<body>
<div>观察4个角的不同 </div>
</body>
</html>CSS3 box-shadow box-shadow 속성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-box-shadow:5px 2px 6px black;
-ms-box-shadow:5px 2px 6px black;
-wekit-box-shadow:5px 2px 6px black;
-o-box-shadow:5px 2px 6px black;
box-shadow:5px 2px 6px black;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-shadow样式</div>
</body>
</html>CSS3 테두리 이미지테두리 이미지
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.border_test
{
-webkit-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-moz-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-o-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-ms-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
display: block;
border-width: 0 12px;
padding: 10px;
text-align: center;
font-size: 26px;
text-decoration: inherit;
color:white;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-image样式</div>
</body>
</html>