CSS 개요 속성

CSS Outlines

윤곽선은 요소 주위에 그려진 선으로, 테두리 가장자리 외부에 위치하며 요소를 강조할 수 있습니다.

윤곽선 속성은 외부 테두리의 스타일, 색상 및 너비를 지정합니다.

CSS 아웃라인(outline)

아웃라인(outline)은 요소 주위에 그려지는 선으로, 테두리 가장자리 외부에 위치하며 요소를 강조할 수 있습니다.

CSS 개요 속성은 요소 개요의 스타일, 색상 및 너비를 지정합니다.

모든 CSS 개요 속성

"CSS" 열의 숫자는 해당 속성을 정의하는 CSS 버전(CSS1 또는 CSS2)을 나타냅니다.

Property	Description	Value	CSS
outline	모든 외부 테두리 속성을 하나의 명령문으로 설정	outline-color 윤곽선 스타일 윤곽선 너비 inherit	2
윤곽선-색상	바깥쪽 테두리의 색상을 설정합니다	색상 이름 16진수 RGB 숫자 invert 상속	2
윤곽선 스타일	바깥 테두리 스타일 설정	none 점선 대시 단단해요 더블 그루브 능선 삽입 시작 상속	2
윤곽선 너비	바깥쪽 테두리의 너비를 설정	thin 중간 Thick length inherit	2

사용법은 CSS 참조 매뉴얼

Example

요소 주위에 선을 그립니다.

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            border:1px solid red;
            outline:green dotted thick;
        }
    </style>
</head>

<body>
<p><b>注意:</b> 如果只有一个!DOCTYPE指定IE8支持 outline属性。</p>
</body>
</html>

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

Instance

윤곽선 너비 설정

   <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p.one
        {
            border:1px solid red;
            outline-style:solid;
            outline-width:thin;
        }
        p.two
        {
            border:1px solid red;
            outline-style:dotted;
            outline-width:5px;
            outline-color: #99fc58;
        }
    </style>
</head>
<body>

<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>

</body>
</html>

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

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p.one { border:1px solid red; outline-style:solid; outline-width:thin; } p.two { border:1px solid red; outline-style:dotted; outline-width:5px; outline-color: #99fc58; } </style> </head> <body> <p class="one">This is some text in a paragraph.</p> <p class="two">This is some text in a paragraph.</p> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear