CSS로 테두리 스타일을 설정하는 방법은 무엇입니까? 다양한 스타일의 테두리 소개(코드 예제)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS로 테두리 스타일을 설정하는 방법은 무엇입니까? 다양한 스타일의 테두리 소개(코드 예제)

青灯夜游

Sep 10, 2018 pm 02:22 PM

테두리 속성css

이 장에서는 CSS로 테두리 스타일을 설정하는 방법을 보여줍니다. 다양한 스타일의 테두리(코드 예제)를 소개하면 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

One: 테두리 테두리 선의 기본 스타일

border style 속성은 표시할 테두리의 종류를 지정합니다

1.border-style 속성

none: 기본값은 테두리 없음
점선: 점선 테두리를 정의하세요
점선: 점선 테두리를 정의합니다
solid: 실선 테두리를 정의합니다
이중: 두 개의 테두리를 정의합니다. 두 테두리의 너비는 border-width
의 값과 같습니다. 홈: 3D 홈 테두리를 정의합니다. 테두리의 색상값에 따라 효과가 달라집니다
능선: 3D 능선 테두리를 정의합니다. 테두리의 색상값에 따라 효과가 달라집니다
삽입: 3D 삽입 테두리를 정의합니다. 테두리의 색상값에 따라 효과가 달라집니다
아웃셋: 3D 아웃셋 테두리를 정의합니다. 테두리 색상 값에 따라 효과가 달라집니다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>border-style属性</title> 
<style>
	.demo{width: 500px;height: 500px;margin:50px auto;}
	p.none {border-style:none;}
	p.dotted {border-style:dotted;}
	p.dashed {border-style:dashed;}
	p.solid {border-style:solid;}
	p.double {border-style:double;}
	p.groove {border-style:groove;}
	p.ridge {border-style:ridge;}
	p.inset {border-style:inset;}
	p.outset {border-style:outset;}
	p.hidden {border-style:hidden;}
</style>
</head>

<body>
	<div class="demo">
		<p class="none">无边框。</p>
		<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 class="hidden">隐藏边框。</p>
	</div>
</body>

Rendering:

CSS로 테두리 스타일을 설정하는 방법은 무엇입니까? 다양한 스타일의 테두리 소개(코드 예제)

위 예시는 위쪽, 아래쪽, 왼쪽, 오른쪽 테두리를 동시에 설정한 것입니다. 하나의 테두리만 설정할 수도 있습니다. 측면 별도로: border-top-style(상단 테두리), border-bottom-style(하단 테두리), border-left-style(왼쪽 테두리), border-right-style(오른쪽 테두리).

2.border-width attribute

테두리 너비를 설정하고 테두리에 지정합니다. 너비에는 두 가지 방법이 있습니다. 2px 또는 0.1em(단위는 px, pt, cm, em 등)과 같은 길이 값을 지정하거나 다음을 사용할 수 있습니다. Thick, Medium (기본값) 및 Thin 의 3가지 키워드 중 하나입니다.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>border-width 属性</title>
		<style>
			.demo {
				width: 500px;
				height: 500px;
				margin: 50px auto;
			}
			
			.one {
				border-style: solid;
				border-width: 5px;
			}
			
			.two {
				border-style: solid;
				border-width: medium;
			}
			
			.three {
				border-style: solid;
				border-width: 1px;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p class="one">一些文本。</p>
			<p class="two">一些文本。</p>
			<p class="three">一些文本。</p>
		</div>
	</body>

Rendering:

CSS로 테두리 스타일을 설정하는 방법은 무엇입니까? 다양한 스타일의 테두리 소개(코드 예제)

참고: "border-width" 속성은 단독으로 사용되는 경우 효과가 없습니다. 먼저 "border-style" 속성을 사용하여 테두리를 설정해야 합니다.

3.border-color 속성

테두리 색상을 설정합니다. 설정할 수 있는 색상:
name - "red"와 같은 지정된 색상의 이름
RGB - "rgb(255,0,0)"과 같은 RGB 값을 지정하세요
16진수 - "#ff0000"

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>border-color 属性</title>
		<style>
			.demo {
				width: 500px;
				height: 500px;
				margin: 50px auto;
			}
			
			.one {
				border-style:solid;
	            border-color:red;
			}
			
			.two {
				border-style: solid;
				border-color:rgb(80,189,114);
			}
			
			.three {
				border-style: solid;
				border-color: #0188FB;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p class="one">颜色1</p>
			<p class="two">颜色2</p>
			<p class="three">颜色3</p>
		</div>
	</body>

Rendering:

CSS로 테두리 스타일을 설정하는 방법은 무엇입니까? 다양한 스타일의 테두리 소개(코드 예제)

과 같은 16진수 값을 지정하세요. 참고: "border-color" 속성은 단독으로 사용하면 작동하지 않습니다. 먼저 "border-style" 속성을 사용해야 합니다. 테두리를 설정합니다.

4. 테두리 - 약어 속성

위는 테두리의 서로 다른 속성을 별도로 설정하거나 테두리의 서로 다른 속성을 동시에 설정할 수 있습니다. 예:

border:5px solid red;

두 개: 테두리 둥근 모서리

border-radius: 테두리의 네 면 모두에 둥근 모서리를 설정합니다
Border-top-left-radius: 테두리의 왼쪽 상단 모서리를 둥글게 설정합니다
Border-top-right-radius: 테두리의 오른쪽 상단 모서리를 둥글게 설정합니다
border-bottom-left-radlius: 테두리의 왼쪽 하단 모서리를 둥글게 설정
border-bottom-right-radius: 테두리 오른쪽 하단 모서리를 둥글게 설정

이름에서 알 수 있듯이 테두리의 기본 속성

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框圆角 </title>
		<style>
			.demo {
				width: 800px;
				height: 500px;
				margin: 50px auto;
			}
			.demo *{
				width: 100px;
				height: 100px;
				margin: 20px 10px;
				border: 3px solid #21B4BB;
				float: left;
			}
			.demo1 {
	            border-radius:10px;
			}
			
			.demo2 {
				border-top-left-radius:10px;
			}
			
			.demo3 {
				border-top-right-radius:10px;
			}
			.demo4 {
				border-bottom-left-radius :10px;
			}
			.demo5 {
				border-bottom-right-radius:10px;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<div class="demo1">四边同时设置圆角</div>
			<div class="demo2">左上角设置圆角</div>
			<div class="demo3">右上角设置圆角</div>
			<div class="demo4">左下角设置圆角</div>
			<div class="demo5">右下角时设置圆角</div>
		</div>
	</body>

Rendering을 설정한 후 테두리에 둥근 모서리 효과를 추가할 수 있습니다.

CSS로 테두리 스타일을 설정하는 방법은 무엇입니까? 다양한 스타일의 테두리 소개(코드 예제)

3: 테두리 그림자(상자 그림자)

h-shadow: 수평 그림자 거리
v-shadow: 수직 그림자 거리
blur: 선택 사항, 흐림 거리
spread: 선택 사항, 그림자 크기
color: 선택 사항, color
inset: 선택 사항, 현재 그림자를 내부 그림자로 변경

구문 사양: box-shadow:h-shadow v-shadow 흐림 확산 색상 삽입;
축약형: box-shadow:h -shadow v -shadow Blur color;

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>边框阴影</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				border: 1px solid #2DC4CB;
				box-shadow:5px 5px #ccc;
			}
			
		</style>
	</head>

	<body>
		<div class="demo">
			hello
		</div>
	</body>

Rendering:

CSS로 테두리 스타일을 설정하는 방법은 무엇입니까? 다양한 스타일의 테두리 소개(코드 예제)

테두리 그림자 효과를 설정하면 상자(용기)를 더욱 입체적으로 만들고 더 나은 시각적 효과를 가져올 수 있습니다.

위 내용은 CSS로 테두리 스타일을 설정하는 방법은 무엇입니까? 다양한 스타일의 테두리 소개(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.