<!doctype html> <html> <head> <meta charset="utf-8"> <title>Ribbon实现</title> <style> /*以下样式只在chrome下最新版本做测试,未做兼容性处理*/ *{ margin:0; padding:0;} body{ background:#f4f4f4; font:12px/1.6 Georgia, "Times New Roman", Times, serif; color:#999; padding:20px 100px;}/*h2标签中3字下垂字体设置*/ .bubble{ margin:5px auto; width:350px; border-radius:10px; box-shadow:0px 0px 8px rgba(0,0,0,0.3); position:relative; z-index:90;} .rectangle{ background:#7f9db9; height:50px; width:380px; box-shadow:0px 0px 4px rgba(0,0,0,0.55); z-index:100; position:relative; left:-15px; top:30px;} .rectangle h2{ line-height:50px; font-size:30px; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,0.2); text-align:center;} .bubble:after{ content:''; border:15px solid #7d90a3; border-color:transparent #7d90a3 transparent transparent; height:0; width:0; position:absolute; left:-30px; top:65px; z-index:-1;} .bubble:before{ content:''; border:15px solid #7d90a3; border-color:transparent transparent transparent #7d90a3; height:0; width:0; position:absolute; right:-30px; top:65px;} /*对内容中的字体做修饰*/ .info{ padding:60px 25px 35px 25px;} .info h2{ font-size:20px;} .info p{ padding-top:10px; font-size:14px; line-height:22px;} .info p a{ color:#C63; text-decoration:none;} .info p a:hover{ text-decoration:underline;} </style> </head> <body> <div class="bubble"> <div class="rectangle"> <h2>3D CSS3 Ribbon</h2> </div> <div class="info"> <h2>I have used only css,friends!</h2> <p>For this tutorial,I have used some new properties.You can realize a nice 3D effect using only css.</p> <p><a href="#">Go to the tutorial!</a></p> </div> </div> </body> </html>
效果贴下代码在chrome最新的浏览器中运行下就可以看到了
相关推荐
在这个“html5+css3练习.zip”压缩包中,包含了用于新手学习的实例,特别是针对那些对HTML5和CSS3还不太熟悉的人。 首先,HTML5(超文本标记语言第五版)是网页内容的结构化语言,它增强了网页的语义性,引入了许多...
【标题】:“CSS3练习” 在网页设计领域,CSS3(Cascading Style Sheets Level 3)是目前广泛使用的样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。这个“CSS3练习”主题旨在帮助...
对于初学者来说,这个HTML5-CSS3的练习集是一份宝贵的资源,它可以帮助你从基础开始,逐步掌握这两门技术,并了解如何将它们与jQuery和其他JavaScript库结合,创建出具有吸引力的现代网页。通过实践这些示例,你可以...
这个“css3 操作练习”显然是一份旨在帮助学习者熟悉和掌握CSS3新特性的实践资料,通过名为“weapp-douban-film”的项目,很可能是模拟微信小程序中的豆瓣电影展示功能。接下来,我们将深入探讨CSS3的一些关键知识点...
HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 ...
这个“HTML5和CSS3编程从基础到应用”的练习文件集,涵盖了从基本概念到高级特性的全面内容,共13个章节,源自清华大学出版社。 **HTML5知识点:** 1. **基础结构**:HTML5的基础结构包括文档类型声明`<!DOCTYPE ...
学习html和css的练习学习html和css的练习学习html和css的练习学习html和css的练习 学习html和css的练习学习html和css的练习学习html和css的练习学习html和css的练习 学习html和css的练习学习html和css的练习学习html...
在"teresina:CSS3练习"项目中,可能包含了利用以上提到的一些或全部CSS3特性进行的实践练习。通过分析teresina-master文件夹中的内容,你可以发现如何将这些特性应用于实际网页设计,例如创建响应式布局、动态效果、...
学习HTML、CSS阶段练习学习HTML、CSS阶段练习学习HTML、CSS阶段练习 学习HTML、CSS阶段练习学习HTML、CSS阶段练习学习HTML、CSS阶段练习 学习HTML、CSS阶段练习学习HTML、CSS阶段练习学习HTML、CSS阶段练习 学习HTML...
在"HTML5-CSS3-Curry:HTML5 CSS3练习"这个项目中,我们主要会关注以下几个知识点: 1. **HTML5新元素**:HTML5新增了如、、、、、等语义化元素,用于更准确地描述网页内容结构,提高可读性和可访问性。 2. **表单...
在"Curso-HTML5-e-CSS3:HTML5和CSS3练习"中,你将深入学习这两项技术的精髓,通过实际操作提升你的网页制作技能。 一、HTML5:新一代网页语言 1. 结构元素:HTML5引入了新的结构元素,如、、、、和,使得网页内容...
本资源"DIV+CSS布局练习"提供了一个经典的实例,适合那些想要深入理解和掌握`CSS`与`DIV`的开发者。在这个压缩包中,你将找到一系列相关素材和练习,帮助你提升`CSS`和`DIV`布局的能力。 首先,让我们详细了解一下`...
在本主题中,我们将深入探讨CSS3练习第一部分,即"CSS-Exercicio-1---Receita"。这个练习主要是为了帮助初学者和开发者熟悉并掌握CSS3的基础概念和特性,通过实践来提升他们的技能。我们将围绕HTML标签的使用以及CSS...
17-CSS3过渡练习.html
在“CSS练习”中,你将有机会实践以上提到的所有概念,通过创建和修改样式,解决实际问题。这将帮助你加深对CSS的理解,提高你的前端开发能力。通过不断练习,你将能够自如地使用CSS构建出美观、响应式的网页,从而...
HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习...
HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业...
本套“HTML与css新手练习源码”旨在为初学者提供一个实践和学习的平台,通过常用的HTML5和CSS3技术,帮助新手快速掌握这两门语言的基本用法。 HTML5是HTML的最新版本,它引入了许多新的元素和功能,以更好地支持...
"一个有关CSS3学习的餐厅练习.rar"这个压缩包文件,显然是为了帮助学习者通过实际操作来掌握CSS3的核心概念和技术。在这个练习中,我们可以期待涉及到以下关键知识点: 1. **选择器**:CSS3引入了更强大的选择器,...