윤곽선은 테두리 가장자리 바로 바깥에 있는 요소 주위에 그려진 선입니다. 개요 스타일 속성은 요소의 전체 개요 스타일을 설정하는 데 사용됩니다. 이 속성의 값은 none로 설정할 수 없습니다. 그렇지 않으면 개요가 표시되지 않습니다.
CSS 개요 스타일 속성을 사용하는 방법은 무엇입니까?
outline-style 속성은 요소의 전체 윤곽선 스타일을 지정하는 데 사용됩니다. 스타일은 없음일 수 없습니다. 그렇지 않으면 윤곽선이 나타나지 않습니다.
구문:
outline-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit;
속성 값:
● 없음: 기본값. 개요를 정의하지 마십시오.
● dotted: 점선 윤곽선을 정의합니다.
● dashed: 점선 윤곽선을 정의합니다.
● solid: 실선의 윤곽을 정의합니다.
● double: 이중선 윤곽선을 정의합니다. 이중선의 너비는 윤곽선 너비 값과 같습니다.
●groove: 3D 홈 프로파일을 정의합니다. 이 효과는 윤곽선 색상 값에 따라 달라집니다.
● ridge: 3D 홈 프로파일을 정의합니다. 이 효과는 윤곽선 색상 값에 따라 달라집니다.
● 삽입: 3D 오목 모서리 윤곽선을 정의합니다. 이 효과는 윤곽선 색상 값에 따라 달라집니다.
● 아웃셋: 3D 볼록 가장자리 윤곽선을 정의합니다. 이 효과는 윤곽선 색상 값에 따라 달라집니다.
● 상속: 윤곽선 스타일 설정이 상위 요소에서 상속되도록 지정합니다.
참고: outline-style 속성은 항상 외곽선 색상 속성보다 먼저 선언되어야 합니다. 요소가 외곽선을 얻은 후에만 외곽선의 색상을 변경할 수 있기 때문입니다.
참고:
윤곽선은 요소를 둘러싸는 여백이지만 다른 테두리 속성에서 비롯됩니다.
윤곽선은 요소 크기의 일부가 아니므로 요소의 너비 및 높이 속성에는 윤곽선의 너비가 포함되지 않습니다. 윤곽선은 공간을 차지하지 않으며 반드시 직사각형일 필요는 없습니다.
css 개요 스타일 속성 예
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p {
border: 1px solid red;
}
p.dotted {
outline-style: dotted;
}
p.dashed {
outline-style: dashed;
}
p.solid {
outline-style: solid;
}
p.double {
outline-style: double;
}
p.groove {
outline-style: groove;
}
p.ridge {
outline-style: ridge;
}
p.inset {
outline-style: inset;
}
p.outset {
outline-style: outset;
}
</style>
</head>
<body>
<p class="dotted">点线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓</p>
<p class="ridge">垄状轮廓</p>
<p class="inset">嵌入轮廓</p>
<p class="outset">外凸轮廓</p>
<p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>
</body>
</html>렌더링:
위 내용은 CSS 개요 스타일 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
정적 우선 : 서버리스 렌더링이 폴백으로 사전 생성 된 Jamstack 사이트Apr 16, 2025 am 11:06 AMJamstack이라는 용어가 점점 더 자주 나타나는 것을 볼 수 있습니다. 나는 한동안 접근 방식으로 팬이었습니다.
CSS- 트릭 크로니클 XXXVIApr 16, 2025 am 10:58 AM이것은 나 자신,이 사이트 및 CSS- 트릭 가족의 일부인 다른 사이트와 함께 진행되는 일의 작은 라운드 중 하나입니다.
주간 플랫폼 뉴스 : 이모티콘 스트링 길이, 둥근 버튼, 번들 교환 문제Apr 16, 2025 am 10:46 AM이번 주에 라운드 업에서 두 개의 이모티콘의 문자열 길이가 항상 같지는 않으며, 둥근 버튼을 만들기 전에 고려해야 할 것이며, 우리는 새가있을 수 있습니다.
칵테일 믹서에서 GraphQL 회의Apr 16, 2025 am 10:43 AMGraphQL 및 REST는 웹 사이트를 사용할 API를 구축 할 때 사용되는 두 가지 사양입니다. REST는 응용 프로그램이 사용하는 일련의 고유 식별자 (URL)를 정의합니다.
SASS 모듈 소개Apr 16, 2025 am 10:42 AMSass는 방금 다른 언어에서 인식 할 수있는 주요 새로운 기능인 모듈 시스템을 시작했습니다. 이것은 @import에게 큰 진전입니다. 가장 많이 사용되는 것 중 하나입니다
내가 걱정을 멈추고 git 훅을 사랑하는 법을 배웠습니다.Apr 16, 2025 am 10:41 AM버전 제어 시스템으로서의 git의 장점은 경쟁하기가 어렵지만 Git은 Commits를 추적하는 데 훌륭한 일을 할 것입니다.
Sass를 더 빨리 만들기위한 개념 증명Apr 16, 2025 am 10:38 AM새로운 프로젝트가 시작될 때, Sass 컴파일은 눈을 깜박이게합니다. 특히 BrowserSync와 짝을 이루는 경우 기분이 좋습니다.
형태로 재사용 가능한 반응 성분을 보여줍니다Apr 16, 2025 am 10:36 AM구성 요소는 React 응용 프로그램의 빌딩 블록입니다. React 응용 프로그램을 구축하고 구성 요소를 사용하지 않는 것은 거의 불가능합니다. 널리 퍼져 있습니다
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
Dreamweaver Mac版
시각적 웹 개발 도구
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
