CSS로 테두리 스타일을 설정하는 방법은 무엇입니까? 다양한 스타일의 테두리 소개(코드 예제)
- 青灯夜游원래의
- 2018-09-10 14:22:298818검색
이 장에서는 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:
위 예시는 위쪽, 아래쪽, 왼쪽, 오른쪽 테두리를 동시에 설정한 것입니다. 하나의 테두리만 설정할 수도 있습니다. 측면 별도로: 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:
참고: "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:
과 같은 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을 설정한 후 테두리에 둥근 모서리 효과를 추가할 수 있습니다.
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:
 "153656012692742CSS로 테두리 스타일을 설정하는 방법은 무엇입니까? 다양한 스타일의 테두리 소개(코드 예제)")
테두리 그림자 효과를 설정하면 상자(용기)를 더욱 입체적으로 만들고 더 나은 시각적 효과를 가져올 수 있습니다.
위 내용은 CSS로 테두리 스타일을 설정하는 방법은 무엇입니까? 다양한 스타일의 테두리 소개(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!