CSS3 테두리

오늘 우리는 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>

지속적인 학습

새로운 파일

<!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 55px 40px 0; } </style> </head> <body> <div>观察4个角的不同 </div> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear