일반적인 CSS 점선 예제 튜토리얼-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

일반적인 CSS 점선 예제 튜토리얼

零下一度

Jun 16, 2017 pm 01:53 PM

DIV CSS 점선 튜토리얼에는 일반적인 DIV 점선 사례를 다양한 스타일로 설명하는 CSS 튜토리얼이 포함되어 있습니다.

이 섹션에서는 일반적인 CSS 점선 및 DIV 튜토리얼을 소개합니다. CSS 점선, 밑줄, 목록 점선이 모두 처리됩니다.

1. CSS 테두리 점선

여기서 점선은 border 속성의 점선 테두리에 의해 제어됩니다. 아래에 설정한 CSS 높이(CSS 높이)와 CSS 너비(CSS 너비)는 데모 보기의 편의를 위해 350픽셀입니다.
1. 네 면에 점선 테두리
border:1px 점선 #000; 검은색 점선 테두리
예:
CSS 코드: .divcss5{border:1px 점선 #000; < ;div class="divcss5">내 네 면은 검은색 점선 테두리입니다
divcss5 선택기의 네 면 테두리를 1px 검은색 점선 테두리

2로 정의하려면 여기에 테두리 약어를 설정하세요. 왼쪽:
CSS 코드: .divcss5-1{border-left:1px dashed #000; height:50px;width:350px}Html 코드:

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

3. 오른쪽에 점선이 있습니다:
CSS 코드: .divcss5-2{border-right:1px dashed #000; height:50px;width:350px} Html code:

오른쪽은 검은색 점선 테두리입니다

여기서는 오른쪽을 검은색 점선 테두리로 설정했습니다

4. 상단 가장자리(상단 가장자리)는 점선입니다:
CSS 코드: .divcss5-3{border-top:1px dashed #000; height:50px;width:350px}Html 코드:

내 윗부분은 검은 점선 테두리입니다

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

5. 점선:
CSS 코드: .divcss5-4{border-bottom:1px dashed # 000; height:50px;width:350px}Html code:

내 아래쪽 가장자리 는 검은색 점선 테두리

여기서 아래쪽 테두리(아래쪽 테두리)를 검은색 점선 테두리

6. 한쪽 면이 점선이 아니고 나머지 세 면이 점선이면
오른쪽 테두리를 추가하세요. 점선은 아니지만 가장자리가 없고 나머지 세 변은 검은색 점선 테두리입니다. CSS 코드: .divcss5-5{border: 1px dashed #000;border-right:0; height:50px;width:350px}
Html code :

오른쪽 테두리에는 테두리가 없고 나머지 세 변은 검은색 점선 테두리입니다.

여기서는 먼저 개체의 네 변을 검은색 1px로 설정합니다. 점선 테두리를 설정한 다음 한쪽 가장자리를 0으로 설정합니다. 이는 3면의 점선 테두리 속성을 설정하는 것과 동일하지만 순서 전후의 테두리 속성 설정에 주의하세요.
위 예제의 전체 DIV+CSS 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虚线 DIVCSS5实例说明<title>www.php.cn</title>
<style>
.divcss5{ border:1px dashed #000; height:50px; width:350px}
.divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
.divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
.divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
.divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
.divcss5-5{border:1px dashed #000; border-right:0;height:50px;width:350px}
/* www.divcss5.com实例 */
</style>
</head>
<body>
www.divcss5.com css虚线实例实例<br>
<div class="divcss5">我四边为虚线边框</div><br>
<div class="divcss5-1">我的左边为黑色虚线边框</div><br>
<div class="divcss5-2">我的右边为黑色虚线边框</div><br>
<div class="divcss5-3">我的上边为黑色虚线边框</div><br>
<div class="divcss5-4">我的下边为黑色虚线边框</div><br>
<div class="divcss5-5">我的右边边框无边线而其它三边为黑色虚线边框实例</div>
</body>
</html>

2. 하이퍼링크 점선 밑줄

링크된 텍스트 콘텐츠에 점선 밑줄이 있는 링크가 있거나 마우스를 위로 이동하는 경우가 많습니다. 연결된 텍스트 점선 밑줄이 나타납니다. 어떻게 해야 할까요? 여기서는 CSS 하이퍼링크의 점선 밑줄을 소개하겠습니다.

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

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

데모 CSS 코드:

a{ border-bottom:1px dashed #111;}/* 여기에서 연결된 텍스트 아래에 점선 밑줄이 나타나도록 설정하세요.*/
a:hover{ border:0;}/* 여기에서 설정하세요 마우스가 지나간 후의 링크 점선은 text*/

DIV CSS 코드 완성:

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

Instructions: text-꾸밈:none 이것은 CSS 밑줄(하이퍼링크의 기본 밑줄 속성)을 제거하기 위한 것입니다.

위 내용은 일반적인 CSS 점선 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

@keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?Apr 18, 2025 am 11:34 AM

나는 다른 날이 질문을 받았다. 나의 첫 번째 생각은 : 이상한 질문입니다! 특이성은 선택기에 관한 것이며 At-Rules는 선택기가 아니므로 ... 무의미합니까?

@Media 및 @Support 쿼리를 중첩 할 수 있습니까?Apr 18, 2025 am 11:32 AM

그렇습니다. 당신은 할 수 있습니다. 그리고 그것은 실제로 어떤 순서로 중요하지 않습니다. CSS 전 처리기가 필요하지 않습니다. 일반 CSS에서 작동합니다.

빠른 Gulp 캐시 파열Apr 18, 2025 am 11:23 AM

CSS 및 JavaScript (및 이미지 및 글꼴 등)와 같은 자산에 멀리 떨어진 캐시 헤더를 설정해야합니다. 브라우저를 알려줍니다

CSS의 품질과 복잡성을 모니터링하는 스택을 찾아Apr 18, 2025 am 11:22 AM

많은 개발자들은 CSS 코드베이스를 유지하는 방법에 대해 글을 썼지 만 코드베이스의 품질을 어떻게 측정하는지에 대해 많은 글을 쓰지 않습니다. 물론, 우리는 가지고 있습니다

Datalist는 가치를 시행하지 않고 값을 제안하는 것입니다Apr 18, 2025 am 11:08 AM

짧고 임의의 텍스트를 수락 해야하는 양식이 있습니까? 이름이나 다른 것 같습니다. 정확히 무엇을위한 것입니다. 많은 것이 있습니다

취리히에서 열린 전면 회의Apr 18, 2025 am 11:03 AM

나는 프론트 컨퍼런스를 위해 스위스 취리히로 향하게되어 매우 기쁩니다 (그 이름과 URL을 사랑합니다!). 나는 전에 스위스에 가본 적이 없기 때문에 나는 흥분했다

CloudFlare Workers와 함께 풀 스택 서버리스 애플리케이션 구축Apr 18, 2025 am 10:58 AM

소프트웨어 개발에서 제가 가장 좋아하는 개발 중 하나는 서버리스의 출현이었습니다. 세부 사항에 푹 빠지는 경향이있는 개발자로서

NUXT 응용 프로그램에서 동적 경로 생성Apr 18, 2025 am 10:53 AM

이 게시물에서는 들어오는 데이터를 위해 동적 경로를 만드는 방법을 보여주기 위해 NetLify에 구축하고 배포 한 전자 상거래 상점 데모를 사용합니다. 상당히입니다

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

WebStorm Mac 버전

유용한 JavaScript 개발 도구

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는