搜尋
首頁web前端html教學css3 气泡对话框实例

代码如下:

<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
css伪选择器学习之伪类选择器解析css伪选择器学习之伪类选择器解析Aug 03, 2022 am 11:26 AM

在之前的文章《css伪选择器学习之伪元素选择器解析​》中,我们学习了伪元素选择器,而今天我们详细了解一下伪类选择器,希望对大家有所帮助!

使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式Nov 20, 2023 am 11:20 AM

使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式,具体代码示例如下:HTML代码:&lt;divid=&quot;container&quot;&gt;&lt;divclass=&quot;item&quot;&gt;第一个子元素&lt;/div&gt;&lt;divclass=&quot;item&quot;&

使用: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、用法;2、参数;3、返回值;4、兼容性;5、性能;6、选择器;7、自动创建元素;8、错误处理;9、清理;10、链式调用;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可以美化网页,增强用户体验。而在CSS中,伪类和伪元素是非常强大的工具,可以帮助开发者实现一些特殊效果,使网页更加丰富多样。本文将分享一些关于伪类和伪元素的高级应用技巧和实践案例,并提供相应的代码示例。一、伪类:hover伪类:hover伪类用于在用户将鼠

伪元素和伪类有什么不同伪元素和伪类有什么不同Oct 09, 2023 pm 02:48 PM

伪元素和伪类的不同点是:1、伪类是用来选择元素的特定状态或位置的选择器,而伪元素是用来在元素的内容前面或后面插入额外的内容的选择器;2、伪类的作用是根据元素的状态或位置来改变其样式,而伪元素的作用是在元素的内容前面或后面插入额外的内容,并对其进行样式修饰。

web中什么是伪类和伪元素web中什么是伪类和伪元素Oct 12, 2023 pm 01:28 PM

web中伪类和伪元素是用于选择和样式化特定元素的CSS选择器的一种特殊形式。详细说明:1、伪类是用于选择元素的特定状态或行为的选择器,以冒号(:)开头,用于向元素添加额外的样式;2、伪元素是用于在元素的内容前面或后面插入生成的内容的选择器,以双冒号(::)开头,用于创建一些不在 HTML 结构中的额外内容。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境