CSS를 사용하여 HTML 글꼴에 테두리 효과를 추가하는 방법(코드 공유)을 단계별로 가르쳐줍니다.

이전 글 "html 웹페이지에서 센터링 효과를 얻는 방법(코드 공유)"에서 웹페이지 전체를 센터링하는 방법을 소개해 드렸습니다. 다음 기사에서는 CSS를 사용하여 HTML 요소 글꼴에 테두리 효과를 추가하는 방법을 함께 살펴보겠습니다.

border 속성을 사용하여 html 요소에 테두리를 추가하세요.

border 단축 속성은 하나의 선언에서 모든 테두리 속성을 설정합니다.

테두리 속성의 세 가지 요소

• border-width 기본값은 1px입니다border-width 默认是 1px

• border-style 边框样式

• border-color 默认是黑色

border-style设置边框的样式可选

代码示例

<style>
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>

代码效果

方法步骤

1、设置div标签的class属性为mydiv

<div class="mydiv">随意写文字</div>

1、<style type="text/css"></style>标签，页面的css样式。

<style type="text/css">...</style>

2、mydiv的div进行样式设置，使用width和height属性设置div的宽度为85px和高度为20px。

.mydiv{
	width: 85px;
	height: 20px;
	}

3、四个边框都设置成为1px实现灰色边框的方法。

1、border-left属性设置div的左边框；

2、border-right属性设置div的右边框；

3、border-top属性设置div的上边框；

4、border-bottom

border-style 테두리 스타일

border-color 기본값은 검은색입니다

border-style 테두리 스타일 설정은 선택 사항입니다코드 예

border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc

🎜코드 효과 🎜🎜 🎜🎜방법 steps🎜 🎜1. div 태그의 class 속성을 mydiv🎜rrreee🎜1로 설정합니다. <style type="text/css"></style> 태그 페이지.
🎜rrreee🎜2. mydiv의 div 스타일을 설정합니다. width 및 height 속성을 사용하여 div의 너비를 85px로, 높이를 20px로 설정합니다. 🎜rrreee🎜3. 회색 테두리를 얻으려면 테두리 4개를 모두 1px로 설정하세요. 🎜🎜1. border-left 속성은 div의 왼쪽 테두리를 설정합니다. 🎜🎜2 border-right 속성은 div의 오른쪽 테두리를 설정합니다. 3. border -top 속성은 div의 위쪽 테두리를 설정합니다. 🎜🎜4. border-bottom 속성은 div의 아래쪽 테두리를 설정합니다. 🎜rrreee🎜코드 효과🎜🎜🎜🎜🎜추천 학습: 🎜CSS 비디오 튜토리얼🎜🎜

위 내용은 CSS를 사용하여 HTML 글꼴에 테두리 효과를 추가하는 방법(코드 공유)을 단계별로 가르쳐줍니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!