CSS에서 테두리 선 스타일을 설정하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 테두리 선 스타일을 설정하는 방법

青灯夜游

Apr 29, 2021 pm 05:02 PM

css경계선

방법: 1. "점선" 점선, "실선" 및 "이중" 이중선과 같은 다양한 속성 값을 통해 다양한 테두리 선 스타일을 설정하려면 border-style 속성을 사용하세요. 2. border-image 속성을 사용하세요. , 테두리에 다양한 배경 이미지를 추가하여 다양한 테두리 선 스타일을 설정합니다.

CSS에서 테두리 선 스타일을 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

방법 1: 테두리 스타일 속성 사용

border-style 속성은 요소 테두리의 스타일을 설정하는 데 사용됩니다.

속성 값:

값	설명
none	테두리를 정의하지 마세요.
hidden	은 "없음"과 동일합니다. 테두리 충돌을 해결하기 위해 숨김이 사용되는 테이블에 적용되는 경우는 제외됩니다.
dotted	점선 테두리를 정의합니다. 대부분의 브라우저에서는 실선으로 렌더링됩니다.
dashed	은 점선을 정의합니다. 대부분의 브라우저에서는 실선으로 렌더링됩니다.
solid	은 실선을 정의합니다.
double	은 이중선을 정의합니다. 이중선의 너비는 border-width 값과 같습니다.
groove	3D 홈 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다.
ridge	3D 능선 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다.
inset	3D 삽입 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다.
outset	3D 시작 테두리를 정의합니다. 효과는 border-color 값에 따라 달라집니다.
inherit	은 테두리 스타일이 상위 요소에서 상속되어야 함을 지정합니다.

예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div {
				margin: 10px 0;
			}
			
			div.dotted {
				border-style: dotted
			}
			
			div.dashed {
				border-style: dashed
			}
			
			div.solid {
				border-style: solid
			}
			
			div.double {
				border-style: double
			}
			
			div.groove {
				border-style: groove
			}
			
			div.ridge {
				border-style: ridge
			}
			
			div.inset {
				border-style: inset
			}
			
			div.outset {
				border-style: outset
			}
		</style>
	</head>

	<body>
		<div class="dotted">点状边框</div>

		<div class="dashed">虚线边框</div>

		<div class="solid">实线边框</div>

		<div class="double">双线边框</div>

		<div class="groove">3D 凹槽边框</div>

		<div class="ridge">3D 垄状边框</div>

		<div class="inset">3D inset 边框</div>

		<div class="outset">3D outset 边框</div>
	</body>

</html>

렌더링:

CSS에서 테두리 선 스타일을 설정하는 방법

방법 2: 테두리 이미지 속성

border-image 속성을 사용하여 테두리에 배경 이미지를 추가합니다

예:

이미지 사용 표시된 90px×90px 이미지는 테두리의 배경 이미지로 사용됩니다.

CSS에서 테두리 선 스타일을 설정하는 방법

코드 예:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:210px;
            height:150px;
            border:30px solid gray;
            border-image:url(img/border.png) 30 repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

브라우저 미리보기는 아래와 같습니다.

CSS에서 테두리 선 스타일을 설정하는 방법

(동영상 공유 학습: css 동영상 튜토리얼)

위 내용은 CSS에서 테두리 선 스타일을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

의사 요소가 어린이라는 것을 조금 상기시켜줍니다.Apr 19, 2025 am 11:39 AM

여기에는 어린이 요소가있는 컨테이너가 있습니다.

'다이나믹 히트 영역'이있는 메뉴Apr 19, 2025 am 11:37 AM

플라이 아웃 메뉴! 두 번째는 호버 이벤트를 사용하여 더 많은 메뉴 항목을 표시하는 메뉴를 구현해야합니다. 우선, 그들은해야합니다

WebVTT의 비디오 접근성 향상Apr 19, 2025 am 11:27 AM

"웹의 힘은 보편적입니다. 장애에 관계없이 모든 사람의 접근은 필수적인 측면입니다."- Tim Berners-Lee

주간 플랫폼 뉴스 : CSS :: 마커 의사 요소, 사전 렌더링 웹 구성 요소, 사이트에 웹 멘션 추가Apr 19, 2025 am 11:25 AM

이번 주에 Roundup : DatePickers는 키보드 사용자에게 두통, Fouc와 싸우는 데 도움이되는 새로운 웹 구성 요소 컴파일러를 제공하고 있으며, 마침내 스타일링 목록 항목 마커에 손을 대고 사이트에서 웹 커넥션을 얻는 4 단계입니다.

너비와 유연한 아이템을 만드는 것은 함께 훌륭하게 재생됩니다Apr 19, 2025 am 11:23 AM

짧은 답변 : Flex-Shrink 및 Flex-Basis는 아마도 당신이 찾고있는 것일 것입니다.

끈적 끈적하고 테이블 헤더를 배치하십시오Apr 19, 2025 am 11:21 AM

당신은 ' t 포지션 : 스티커; 에이

주간 플랫폼 뉴스 : 검색 콘솔에서의 HTML 검사, 글로벌 스크립트 범위, Babel Env 추가 기본값 쿼리 추가Apr 19, 2025 am 11:18 AM

이번 주에 Web Platform News의 세계를 둘러싼 Google 검색 콘솔은 크롤링 된 마크 업을보다 쉽게 볼 수 있습니다.

Indieweb 및 웹 협상Apr 19, 2025 am 11:16 AM

Indieweb는 일입니다! 그들은 회의와 모든 것을 얻었습니다. 뉴요커는 심지어 그것에 대해 글을 쓰고 있습니다.

See all articles

핫 AI 도구

뜨거운 도구

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.