목차
css3气泡对话框设计
웹 프론트엔드 HTML 튜토리얼 css3 气泡对话框实例

css3 气泡对话框实例

Jun 01, 2016 am 09:53 AM
after before 의사 클래스

代码如下:

<code class="language-html">


<meta charset="UTF-8">
<title>css3对话框设计</title>
<style>
.page{
    width:500px;
}
/* demo1 */
.demo1{
    border:2px solid #ccc;
	padding:10px;
	margin-bottom:20px;
	position:relative;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.demo1:before,.demo1:after{ 
	content:'';
	width:0;
	height:0;
	position:absolute;
}
.demo1:before{
    left:10px;
	bottom:-8px;
	border-top:8px solid #ccc;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
}
.demo1:after{
    left:12px;
	bottom:-6px;
	border-top:8px solid #fff;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
}
/* demo2 */
.demo2{
    border:2px solid #29B4F0;
	padding:10px;
	position:relative;
	margin-bottom:20px;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.demo2:before{
	content:'';
	width:8px;
	height:8px;
	position:absolute;
	left:20px;
	bottom:-7px;
	background-color:#fff;
	border:2px solid #29B4F0;
	border-width: 0 2px 2px 0;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}
/* demo3 */
.demo3{
    background-color:#B6F5FE;
	padding:10px;
	position:relative;
	margin-bottom:20px;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.demo3:before,.demo3:after{ 
	content:'';
	width:0;
	height:0;
	position:absolute;
}
.demo3:before{
    left:10px;
	bottom:-18px;
	border-top:30px solid #B6F5FE;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	-webkit-transform:rotate(50deg);
	-moz-transform:rotate(50deg);
	-ms-transform:rotate(50deg);
	-o-transform:rotate(50deg);
	transform:rotate(50deg);
}
/* demo4 */
.demo4{
    background-color:#82AF11;
	padding:10px;
	color:#fff;
	position:relative;
	text-shadow:0 -1px 1px rgba(0,0,0,.2);
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.demo4:before{
    content:'';
	width:100px;
	height:20px;
	background-color:#82AF11;
	position:absolute;
	bottom:-20px;
	left:200px;
}
.demo4:after{
    content:'';
	width:50px;
	height:20px;
	background-color:#fff;
	position:absolute;
	bottom:-20px;
	left:200px;
	border-radius:0 20px 0 0;
}
.demo4 > :first-child:before{
     content:'';
	width:50px;
	height:20px;
	background-color:#fff;
	position:absolute;
	bottom:-20px;
	left:250px;
	border-radius:20px 0 0 0;   
}
</style>


  <div class="page">
    <h1 id="css-气泡对话框设计">css3气泡对话框设计</h1>
    <p class="demo1">ImagePlay 网站是一个快速的原型开发工具,可用于构建和测试图形处理算法,它配备了超过70多个图像处理器,可以组合成各种复杂的流程链接;该工具完全开源,可运行于windows、苹果、linux系统。<br>:before & after</p>
    <p class="demo2">How Long to Read 网站是由 Alexander Thorburn-Winsor 开发的一个在线测试一本书籍阅读完所需要的时间,帮助读者发现需要多长时间阅读的书籍,并提供读者量身定制的时间数据,方便用户通过阅读时间来查询适合自己阅读的书籍。<br>:before & :after</p>
    <p class="demo3">How Long to Read 网站的使用方法:读者输入一本书籍的名称,然后同简单的WPM(全称为words per minute,即每分钟多少个字的意思)来预测用户读书的速度,你可以发现阅读任何书籍的时候所需要多长时间完成,除了此功能外还可以使用该工具来搜索想要的书籍。<br>:before & :after</p>
    <section class="demo4"><p>Scr IM 网站是一个致力于把邮箱地址转换为短链接的在线工具,可以帮助拥有邮箱的用户避免垃圾邮件的骚扰,用户可以把转换为短链接的邮箱地址发布在公开的网络平台上。<br>:before & :after</p></section>
    
  </div>

</code>
로그인 후 복사

效果:

css3 气泡对话框实例

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

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

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

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

위치가 3보다 크거나 같은 하위 요소의 스타일을 선택하려면 :nth-child(n+3) 의사 클래스 선택기를 사용하십시오. 위치가 3보다 크거나 같은 하위 요소의 스타일을 선택하려면 :nth-child(n+3) 의사 클래스 선택기를 사용하십시오. Nov 20, 2023 am 11:20 AM

:nth-child(n+3) 의사 클래스 선택기를 사용하여 위치가 3보다 크거나 같은 하위 요소의 스타일을 선택합니다. 구체적인 코드 예는 다음과 같습니다. HTML 코드: &lt;divid="container" &gt;&lt;divclass="item"&gt;첫 번째 하위 요소&lt;/div&gt;&lt;divclass="item"&

CSS 의사 선택기 학습 의사 클래스 선택기 분석 CSS 의사 선택기 학습 의사 클래스 선택기 분석 Aug 03, 2022 am 11:26 AM

이전 글 "Css 의사 선택자 학습 - 의사 요소 선택자 분석"에서 의사 요소 선택자에 대해 배웠고, 오늘은 의사 클래스 선택자에 대해 자세히 살펴보는 것이 모든 분들께 도움이 되기를 바랍니다.

:active 의사 클래스 선택기를 사용하여 마우스 클릭 효과를 위한 CSS 스타일 구현 :active 의사 클래스 선택기를 사용하여 마우스 클릭 효과를 위한 CSS 스타일 구현 Nov 20, 2023 am 09:26 AM

마우스 클릭 효과를 얻기 위해 :active 의사 클래스 선택기를 사용하는 CSS 스타일 CSS는 웹 페이지의 성능과 스타일을 설명하는 데 사용되는 계단식 스타일 시트 언어입니다. :active는 마우스를 클릭할 때 요소의 상태를 선택하는 데 사용되는 CSS의 의사 클래스 선택기입니다. :active 의사 클래스 선택기를 사용하면 클릭한 요소에 특정 스타일을 추가하여 마우스 클릭 효과를 얻을 수 있습니다. 다음은 :active 의사 클래스 선택기를 사용하여 마우스 클릭 효과를 얻는 방법을 보여주는 간단한 샘플 코드입니다.

insertbefore와 before의 차이점 insertbefore와 before의 차이점 Nov 30, 2023 pm 02:34 PM

insertbefore와 before의 차이점: 1. 사용법, 3. 호환성, 6. 선택기, 8. 오류 처리, 11. 기타 차이점. 자세한 소개: 1. 사용법, insertBefore는 모든 DOM 요소에서 직접 호출할 수 있는 DOM 메소드이고 before는 jQuery 객체에서만 호출할 수 있는 jQuery 메소드입니다. 2. 매개변수 등

의사 클래스와 의사 요소의 차이점은 무엇입니까? 의사 클래스와 의사 요소의 차이점은 무엇입니까? Dec 05, 2023 am 11:24 AM

의사 클래스와 의사 요소의 차이점은 다음과 같습니다. 1. 의사 클래스는 특정 요소에 일부 특수 효과를 추가하는 데 사용되는 반면 의사 요소는 특정 요소 앞이나 뒤에 일부 내용이나 스타일을 추가하는 데 사용됩니다. 2. 의사 요소 클래스는 일반적으로 표시됩니다. 단일 콜론 ":"으로 표시되는 반면 의사 요소는 일반적으로 이중 콜론 "::"으로 표시됩니다.

CSS의 의사 클래스 및 의사 요소에 대한 고급 응용 기술 및 실제 사례 공유를 마스터합니다. CSS의 의사 클래스 및 의사 요소에 대한 고급 응용 기술 및 실제 사례 공유를 마스터합니다. Dec 23, 2023 am 08:52 AM

CSS의 의사 클래스 및 의사 요소에 대한 고급 응용 기술과 실제 사례를 익히십시오. CSS는 웹 페이지를 아름답게 만들고 사용자 경험을 향상시키는 데 필수적인 기술입니다. CSS에서 의사 클래스와 의사 요소는 개발자가 특수 효과를 달성하고 웹 페이지를 더욱 풍부하고 다양하게 만드는 데 도움이 되는 매우 강력한 도구입니다. 이 기사에서는 의사 클래스 및 의사 요소에 대한 고급 응용 기술과 실제 사례를 공유하고 해당 코드 예제를 제공합니다. 1. 의사 클래스: hover 의사 클래스: hover 의사 클래스는 사용자가 마우스를 움직일 때 사용됩니다.

웹의 의사 클래스와 의사 요소란 무엇입니까? 웹의 의사 클래스와 의사 요소란 무엇입니까? Oct 12, 2023 pm 01:28 PM

웹의 의사 클래스 및 의사 요소는 특정 요소를 선택하고 스타일을 지정하는 데 사용되는 특수한 형태의 CSS 선택기입니다. 자세한 설명: 1. Pseudo-class는 요소의 특정 상태나 동작을 선택하는 데 사용되는 선택자입니다. 콜론(:)으로 시작하며 요소에 추가 스타일을 추가하는 데 사용됩니다. 요소의 콘텐츠 앞 또는 앞에 이중 콜론(::)으로 시작하는 생성된 콘텐츠 뒤에 삽입된 선택자는 HTML 구조에 없는 일부 추가 콘텐츠를 만드는 데 사용됩니다.

의사 요소와 의사 클래스의 차이점은 무엇입니까? 의사 요소와 의사 클래스의 차이점은 무엇입니까? Oct 09, 2023 pm 02:48 PM

의사 요소와 의사 클래스의 차이점은 다음과 같습니다. 1. 의사 클래스는 요소의 특정 상태나 위치를 선택하는 데 사용되는 선택자이고, 의사 요소는 요소 내용 앞이나 뒤에 추가 내용을 삽입하는 데 사용되는 선택자입니다. 2. pseudo-class의 기능은 요소의 상태나 위치에 따라 스타일을 변경하는 것이고, pseudo-element의 기능은 요소의 내용 앞이나 뒤에 추가 내용을 삽입하고 스타일을 수정하는 것입니다.

See all articles