집 >웹 프론트엔드 >CSS 튜토리얼 >점선 테두리를 구현하는 DIV 및 CSS 메서드 | CSS 점선 밑줄 및 점선

점선 테두리를 구현하는 DIV 및 CSS 메서드 | CSS 점선 밑줄 및 점선

不言원래의: 2018-06-28 13:44:433778검색

이 글에서는 주로 DIV와 CSS | CSS 점선 밑줄과 점선으로 점선 테두리를 구현하는 방법을 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다. border 속성을 통한 테두리 Border 제어 점선

1. CSS 테두리 점선 - TOP

여기서 점선은 border 속성의 점선 테두리에 의해 제어됩니다. 아래에 설정한 CSS 높이(CSS 높이)와 CSS 너비(CSS 너비)는 데모 보기의 편의를 위해 350픽셀입니다.

1. 네 면은 점선 테두리입니다

border:1px dashed #000; 黑色虚线边框[code/]

예:

CSS 코드:

[code].pcss5{border:1px dashed #000; height:50px;width:350px}

Html 코드:

<p class="pcss5">我的四边为黑色虚线边框</p>

여기에서 네 면에 1px의 검은색 점선 테두리가 있는 pcss5 선택기를 정의하는 테두리 약어 방법을 설정합니다.

2. 왼쪽은 점선:

CSS 코드:

.pcss5-1{border-left:1px dashed #000; height:50px;width:350px}

Html 코드:

<p class="pcss5-1">我的左边为黑色虚线边框</p>

여기 왼쪽에 검은색 점선 테두리가 있습니다.

세 번째, 오른쪽 점선:

CSS 코드 :

.pcss5-2{border-right:1px dashed #000; height:50px;width:350px}

Html 코드 :

<p class="pcss5-2">我的右边为黑色虚线边框</p>

여기 오른쪽에 검은색 점선 테두리가 설정되어 있습니다

넷째, 윗면(상단 가장자리)이 점선으로 되어있습니다.

CSS 코드 :

.pcss5-3{border-top:1px dashed #000; height:50px;width:350px}

Html code:

<p class="pcss5-3">我的上边为黑色虚线边框</p>

여기서 위쪽(상단 가장자리)에 검은색 점선 테두리가 설정되어 있습니다.

5. 아래쪽 가장자리(하단 가장자리)가 점선으로 설정되어 있습니다:

CSS 코드:

.pcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}

Html 코드:

<p class="pcss5-4">我的下边为黑色虚线边框</p>

여기서 아래쪽 가장자리(아래쪽 가장자리)는 검은색 점선 테두리로 설정되어 있습니다.

6. 어느 쪽도 점선이 아니고 나머지 세 쪽은 점선입니다

점선이 아닌 오른쪽 테두리를 추가하세요. 가장자리가 없고 나머지 세 변은 검은색 점선 테두리입니다.

CSS 코드:

.pcss5-5{border:1px dashed #000;border-right:0; height:50px;width:350px}

Html 코드:

我的右边边框无边线而其它三边为黑色虚线边框实例 
这里通过先设置了该对象四边为黑色1px虚线边框，紧接着又设置一边边线为0的设置，这样相当于设置了3边的边框虚线属性，但是这里注意边框属性设置前后顺序。 
以上实例完整p+CSS代码如下： 
 
 
 
 
CSS 虚线 pCSS5实例说明www.pcss5.com 
 
 
 
www.pcss5.com css虚线实例实例
我四边为虚线边框
<p class="pcss5-1">我的左边为黑色虚线边框</p>
<p class="pcss5-2">我的右边为黑色虚线边框</p>
<p class="pcss5-3">我的上边为黑色虚线边框</p>
<p class="pcss5-4">我的下边为黑色虚线边框</p>
我的右边边框无边线而其它三边为黑色虚线边框实例

2. 하이퍼링크 점선 밑줄 - TOP

우리는 종종 링크된 텍스트 내용에 링크와 함께 점선 밑줄을 표시하도록 설정합니다. , 또는 링크된 텍스트 위로 마우스를 이동하면 점선 밑줄이 나타납니다. 이를 달성하는 방법 여기서는 CSS 하이퍼링크의 점선 밑줄을 소개합니다.

1. 연결된 텍스트에는 점선 밑줄이 있습니다.

여기서 CSS 테두리 속성을 사용하여 하이퍼링크 개체의 CSS 스타일도 제어합니다.

Demo CSS 코드:

a{ border-bottom:1px dashed #111;}/* 这里设置带链接文字下方出现虚线下划线*/

a:hover{ border:0;}/* 这里设置鼠标经过被链接文字时不出现虚线 */

Full div CSS 코드:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>CSS 虚线下划线 pCSS5实例说明</title> 
<style> 
a{ border-bottom:1px dashed #111;text-decoration:none;} 
a:hover{ border:0;} 
</style> 
</head> 
<body> 
欢迎到<a href="http://www.pcss5.com/">CSS教程网</a>的www.pcss5.com - pcss5学习CSS 
</body> 
</html>

Description: text-꾸밈:none; CSS 밑줄(하이퍼링크의 기본 밑줄 속성)을 제거합니다.

위는 CSS 하이퍼링크입니다. 텍스트는 파선과 밑줄로 표시됩니다.

2. 링크된 텍스트 위에 마우스를 놓으면 점선 밑줄이 나타납니다.

위와 매우 유사합니다. 하이퍼링크 A에 대한 밑줄을 제거하고 마우스가 해당 텍스트 위로 지나갈 때 CSS 텍스트 아래의 점선 테두리에 밑줄을 긋기만 하면 됩니다. .

해당 CSS 코드:

a{text-decoration:none;}
[/code]a:hover{border-bottom:1px dashed #111;} [/code]

그렇습니다. 하이퍼링크 밑줄 예제를 시도해 볼 수도 있습니다.

3. 목록 CSS 점선 밑줄 - TOP

CSS LI를 접할 때 종종 이 CSS 목록 스타일의 콘텐츠 행 하단이 아래와 같이 점선으로 구분되기를 바랍니다.

여기서만 필요합니다. LI의 하단 테두리를 점선 테두리로 설정하는 것이 전부입니다.

먼저 CSS를 초기화할 때 CSS 코드를 설정합니다:

li{border-bottom:1px dashed #111;}

위와 같이 li의 목록 콘텐츠에 점선 분리 효과를 얻을 수 있습니다(각 li 콘텐츠의 하단은 점선 테두리입니다)

또한, 우리는 종종 리를 만난다. 하단 점선은 매우 작고 점만큼 작으며 경계를 달성하기 어렵습니다. 이때 점선 그림(한쪽 높이가 3픽셀인 1픽셀 컬러 그림)이 필요합니다. wide 달성 가능)

해당 CSS li 코드:

Li{background:url(点图片路径) repeat-x 0 bottom}

여기서는 자세한 데모가 없습니다. 또한 VIP에서 다양한 li을 자세하게 만드는 CSS 지식 포인트를 소개하고 시연합니다.

4. CSS는 수평 점선을 정의합니다 - TOP

이것은 p 객체에 테두리 점선을 설정하여 달성할 수도 있습니다. hr 수평선 레이블에 점선 속성을 설정할 수도 있습니다. 수평 점선 구분선을 얻으려면.

다음과 같을 수 있습니다:

p에 가로 점선 설정:

.pcss5{ height:1px; width:100%; border-bottom:1px dashed #000;}

해당 HTML 코드:

<p class="pcss5"></p>

hr 가로 구분선에 대한 속성 설정:

첫 번째는 점선 속성을 설정하는 것입니다. hr 태그에:

<hr size=1 style="color: blue;border-style:dashed ;width:100%">

여기서 설명하는 바는 size는 hr의 값이고 한 변은 1로 설정할 수 있다는 것입니다.

두 번째 방법은 CSS 코드 또는 CSS 파일에서 hr의 CSS 속성을 정의하는 것입니다.

hr {border-top:1px dashed #00F ; }

html의 hr 제목 코드에 해당합니다.

<hr size=1>

여기서 hr의 테두리를 위쪽 또는 아래쪽으로 설정하는 것입니다. 위쪽과 아래쪽을 1픽셀의 파란색 점선 테두리로 설정하고 hr의 크기를 1로 설정합니다. 이는 첫 번째 값과 거의 같습니다. 유일한 차이점은 hr 태그가 html에 나타날 때 hr 태그 속성이 css로 설정하면 웹페이지가 여러번 나타날 경우 코드의 양이 줄어들 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

점선 테두리를 구현하는 DIV 및 CSS 메서드 | CSS 점선 밑줄 및 점선

관련 기사