CSS3의 div 요소에 개요를 추가하는 방법의 예-CSS 튜토리얼-php.cn

CSS3의 div 요소에 개요를 추가하는 방법의 예

黄舟

풀어 주다： 2017-07-27 09:18:35

원래의

2270명이 탐색했습니다.

css3 개요는 div 요소에 개요를 추가합니다

때로는 스타일을 더 아름답게 만들기 위해 div에 개요를 적절하게 추가할 수 있습니다. 이는 개요 속성을 통해 달성할 수 있습니다.

outline에는 다음 속성 값이 포함됩니다.

outline-width: 윤곽선의 두께입니다.

이 속성 값에는 얇은, 중간, 두꺼운, 길이의 4가지 매개변수가 포함되어 있습니다.

thin: 얇은 윤곽선을 정의합니다.

medium: 중간 윤곽선을 정의합니다.

thick: 두꺼운 윤곽선을 정의합니다.

length: 윤곽선의 두께를 지정할 수 있습니다. 참고: 이 값은 음수일 수 없습니다.

outline-style: 윤곽선의 스타일입니다.

이 속성의 공통 매개변수:

none: 없음으로 설정하면 윤곽선이 표시되지 않습니다.

dotted: 점선 윤곽선,

dashed: 점선 윤곽선,

solid: 실선 윤곽선.

outline-color: 외곽선의 색상

이 속성의 매개변수:

색상 이름: (red);

rgb 색상 값: rgb(255,255,255);

Hex 색상 값: 예: #ff0000 ;

outline-offset: 외곽선과 컨테이너 사이의 오프셋 값입니다. 이 값이 음수이면 컨테이너 내부에 윤곽선이 나타납니다.

샘플 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=&#39;utf-8&#39; />
<title>无标题文档</title>
<style>
.aixuexi{
padding:20px;
position:fixed;
top:100px;
left:300px;
border:2px dashed #000;
width:100px;
height:100px;
line-height:100px;
background:#abcdef;
outline-width:10px;
outline-style:solid; 
outline-color:#99FF00;
outline-offset:20px;
}
</style>
</head>
<body>
<div class="aixuexi"><a href="#">hello world</a></div>
</body>
</html>

로그인 후 복사

위 내용은 CSS3의 div 요소에 개요를 추가하는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!