CSS 점선 스타일 만드는 방법과 점선 스타일 적용 예시
- yulia원래의
- 2018-09-18 14:41:386393검색
페이지 레이아웃 시 특정 효과를 나타내기 위해서는 CSS 점선 스타일을 사용해야 하는 경우가 많지만 아직 CSS 점선 스타일에 익숙하지 않은 초보자가 많습니다. , CSSborder 속성을 사용하여 점선 스타일을 만드는 방법 및 CSS 점선 스타일의 일부 적용 예입니다. 예: CSS 점선 테두리 사용, CSS 하단 점선 테두리 사용, 점선 사용 등 . 도움이 필요한 친구들이 참고할 수 있습니다.
1. CSS 점선을 만드는 방법
border-style 속성은 요소의 네 가지 테두리 스타일을 설정할 수 있습니다. 속성 값은 다음과 같습니다:
dotted: 점선, 대부분의 브라우저에서 실선으로 렌더링
dashed: 점선, 대부분의 브라우저에서 실선으로 렌더링
solid: 실선 정의 line# 🎜🎜#none：경계 없음
double：이중선
CSS 점선 스타일의 구현은 점선과 점선의 속성 값을 사용하는 것입니다.
1 border-style: 점선 이중 점선. # 🎜🎜#은 위쪽 테두리가 점선, 오른쪽 테두리가 실선, 아래쪽 테두리가 이중선, 왼쪽 테두리가 점선임을 의미합니다.
2 border-style: doteded double
은 의미합니다. 위쪽 테두리는 점선, 오른쪽과 왼쪽 테두리는 실선, 아래쪽 테두리는 이중선입니다.
3 border-style: dotted solid
은 위쪽 테두리와 아래쪽 테두리가 점선이라는 뜻이고, 오른쪽과 왼쪽 테두리는 실선입니다 #🎜 🎜#4, border-style:dotted
는 네 개의 테두리가 모두 점선으로 되어 있음을 의미합니다
테두리는 다음과 같이 작성됩니다: border: border-width, 테두리 스타일, 테두리 색상. 따라서 너비 1px의 검은 점선은 border: 1px dashed #000;
2. CSS 점선 적용 예시
# 🎜🎜#1, CSS 점선 테두리
<style type="text/css">
div{border: 1px dashed #000;}
</style>
<body>
<div>生活不止眼前的苟且，还有诗和远方的田野</div>
</body>렌더링:
#🎜 🎜##🎜 🎜#2 li 목록은 점선, 즉 CSS 점선 아래쪽 테두리로 구분됩니다. 
CSS를 사용하는 페이지도 많습니다. li 태그를 레이아웃에 사용하고 내용은 li의 각 줄 아래에 점선으로 구분되며 이를 위해 border-bottom을 분리하고 사용합니다.
<style type="text/css">
li{border-bottom: 1px dashed #000;}
</style>
<body>
<ul>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
</ul>
</body>Rendering:
3 CSS 가로 점선
, hr 태그 사용 , 그리고 hr 태그에 스타일을 추가합니다. border: 1px dotted #FF0000<hr style="border: 1px dotted #FF0000;">
Rendering:
#🎜 🎜# 4. 하이퍼링크는 점선과 밑줄
으로 표시되며, border-bottom: 1px dashed #FF0000은 a 태그의 내용을 강조하는 데 사용됩니다.
<style type="text/css">
a{text-decoration: none;border-bottom: 1px dashed #FF0000;}
</style>
<body>
<div>欢迎大家来<a href="#">PHP中文网</a>学习知识</div>
</body> 렌더링: 
위에서는 CSS 점선 스타일의 제작 방법과 점선 스타일의 사용법을 소개합니다. 페이지 레이아웃 예제를 사용하여 친구들이 더 많이 시도하고 다양한 효과를 시도해 볼 수 있습니다. 이 기사가 배우기를 좋아하는 여러분에게 도움이 되기를 바랍니다.
위 내용은 CSS 점선 스타일 만드는 방법과 점선 스타일 적용 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!