>  기사  >  웹 프론트엔드  >  CSS 점선 스타일 만드는 방법과 점선 스타일 적용 예시

CSS 점선 스타일 만드는 방법과 점선 스타일 적용 예시

yulia
yulia원래의
2018-09-18 14:41:386410검색

페이지 레이아웃 시 특정 효과를 나타내기 위해서는 CSS 점선 스타일을 사용해야 하는 경우가 많지만 아직 CSS 점선 스타일에 익숙하지 않은 초보자가 많습니다. , CSSborder 속성을 사용하여 점선 스타일을 만드는 방법 및 CSS 점선 스타일의 일부 적용 예입니다. 예: CSS 점선 테두리 사용, CSS 하단 점선 테두리 사용, 점선 사용 등 . 도움이 필요한 친구들이 참고할 수 있습니다.

1. CSS 점선을 만드는 방법

border-style 속성은 요소의 네 가지 테두리 스타일을 설정할 수 있습니다. 속성 값은 다음과 같습니다:
dotted: 점선, 대부분의 브라우저에서 실선으로 렌더링
dashed: 점선, 대부분의 브라우저에서 실선으로 렌더링
solid: 실선 정의 line# 🎜🎜#none:경계 없음
double:이중선
CSS 점선 스타일의 구현은 점선과 점선의 속성 값을 사용하는 것입니다.

border-style 속성은 1개의 값, 2개의 값, 3개의 값 또는 4개의 값으로 설정할 수 있습니다.

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 점선 스타일 만드는 방법과 점선 스타일 적용 예시 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;">
CSS 점선 스타일 만드는 방법과 점선 스타일 적용 예시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 점선 스타일의 제작 방법과 점선 스타일의 사용법을 소개합니다. 페이지 레이아웃 예제를 사용하여 친구들이 더 많이 시도하고 다양한 효과를 시도해 볼 수 있습니다. 이 기사가 배우기를 좋아하는 여러분에게 도움이 되기를 바랍니다.

위 내용은 CSS 점선 스타일 만드는 방법과 점선 스타일 적용 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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