CSS 테두리 스타일
CSS 테두리 스타일
border-style을 사용하여 테두리 스타일을 설정하거나 위쪽, 아래쪽, 왼쪽 및 오른쪽 스타일을 별도로 설정할 수 있습니다.
테두리-톱 스타일
테두리 왼쪽 스타일
테두리 오른쪽 스타일
border -bottom-style
단일 테두리, 점선 테두리, 실선 테두리, 이중 테두리, 테두리 없는 테두리 등 정의할 수 있는 테두리 스타일에는 여러 가지가 있습니다. .
<html>
<head>
<title>测试内边距</title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<style type="text/css">
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}/*设置3D凹槽边框*/
p.ridge {border-style: ridge}/*设置3D垄状边框*/
p.inset {border-style: inset}/*设置3D inset 边框*/
p.outset {border-style: outset}/*设置3D outset 边框*/
</style>
</head>
<body>
<p class="none">我没有边框</p>
<p class="dotted">点状边框</p>
<p class="dashed">虚线边框</p>
<p class="solid">实线边框</p>
<p class="double">双线边框</p>
<p class="groove">3D凹槽边框</p>
<p class="ridge">3D 垄状边框</p>
<p class="inset">3D inset 边框</p>
<p class="outset"> 3D outset 边框</p>
</body>
</html>CSS 테두리 너비 및 색상
테두리 너비
테두리 너비는 border-width로 정의되며, 위, 아래, 속성
border-top-width
border-bottom-width
border -왼쪽 너비
테두리 오른쪽 너비
테두리 색상
테두리 너비는 테두리 색상으로 정의되며, 위쪽과 아래쪽도 별도로 설정할 수 있습니다. 왼쪽과 오른쪽에 4개의 속성
border-top-color
border-bottom-color
border-left -color
border-right-color
<!DOCTYPE html>
<html>
<head>
<title>测试内边距</title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<style type="text/css">
/*定义p标签，是实线边框*/
p {border-style: solid;}
.all {
/*定义所有边框宽度为5像素*/
border-width: 5px;
/*定义所有边框是颜色为橙色*/
border-color: #FF8000
}
.top {
/*定义上边框宽度为5像素*/
border-top-width: 5px;
/*定义上边框是颜色为橙色*/
border-top-color: #FF8000
}
.bottom {
/*定义下边框宽度为5像素*/
border-bottom-width: 5px;
/*定义下边框是颜色为橙色*/
border-bottom-color: #FF8000
}
.left {
/*定义左边框宽度为5像素*/
border-left-width: 5px;
/*定义左边框是颜色为橙色*/
border-left-color: #FF8000
}
.right {
/*定义右边框宽度为5像素*/
border-right-width: 5px;
/*定义右边框是颜色为橙色*/
border-right-color: #FF8000
}
</style>
</head>
<body>
<p class="all">我是设置所有边框的</p>
<p class="top">我只负责上面</p>
<p class="bottom">我负责下面</p>
<p class="left">我设置的是左边</p>
<p class="right">我设置的是右边</p>
</body>
</html>각 테두리 설정 개별적으로
CSS에서는 서로 다른 측면에 서로 다른 테두리를 지정할 수 있습니다.
인스턴스
p
{
border -top-style:dotted;
border -right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
위의 예에서는 단일 속성을 설정할 수도 있습니다.
border-style: dotted solid
border-style 속성은 1~4개의 값을 가질 수 있습니다:
border-style: 점선 이중 점선;
상단 테두리는 다음과 같습니다. 점선
오른쪽 테두리는 실선
하단 테두리는 이중선
왼쪽 테두리는 점선
border-style: 점선 이중선 ;
위쪽 테두리는 점선으로
왼쪽, 오른쪽 테두리는 실선으로
아래쪽 테두리는 이중으로
border-style: 점선 실선;
상단 및 하단 테두리는 점선입니다
오른쪽 및 왼쪽 테두리는 실선입니다
border-style: 점선;
사면 테두리가 점선으로 표시됩니다
테두리에도 약어 속성이 있습니다
border: 5px solid red;
