纯CSS无图实现阴影和小三角提示框代码

　　纯CSS无图实现阴影和小三角提示框代码，css模拟阴影和小三角，tip提示效果，用面向对象的思想去书写css,用面向对象的心态去书写css。那个提示的小三角是代码的亮点，也是核心，用纯CSS代码实现，模拟阴影的原理：

　　1、用一个层做背景层，背景颜色填充成阴影颜色。

　　2、在背景层里面放置目标层，目标层和背景层一样大。这样呢，目标层就完全遮盖了背景层。这时候只需给目标层设置为相对定位。使其偏离原来位置left和top各-4px，就模拟出了阴影。当然，不一定必须是-4，可以是其他数值。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /><br /> <title>css模拟阴影和小三角</title><br /> <style><br /> a{ color:#666; text-decoration:none; line-height:25px; text-indent:24px;}<br /> .w{ width:200px; position:absolute; background:#999; left:400px; top:200px; font-size:12px; text-align:left}/*模拟灰色阴影背景层*/<br /> .x{ width:180px; position:relative; background:#ff9; border:1px solid #F96; padding:10px; left:-4px; top:-4px;}/*内容div*/<br /> .y , .z{position:absolute; left:130px;}<br /> .y{ color:#ff9; top:-6px;}/*模拟小三角*/<br /> .z{ color:#f96; top:-7px;}/*模拟小三角*/<br /> .l680{ left:680px;}<br /> .t400{ top:400px;}<br /> </style><br /> </head><br /> <body><br /> <div class="w"><br /> <div class="x"><p><a href="#">用面向对象的思想去书写css,用面向对象的心态去书写css。</a></p><br /> <div class="z">◆</div><br /> <div class="y">◆</div><br /> </div><br /> </div><br /> <div class="w l680"><br /> <div class="x"><p><a href="#">源码爱好者提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等，做有质量的学习型源码下载站。<br /> </a></p><br /> <div class="z">◆</div><br /> <div class="y">◆</div><br /> </div><br /> </div><br /> <div class="w t400"><br /> <div class="x"><p><a href="#">就是很常见的一种布局：有容器A，里边排1~6，六个小层，每行3个如何实现：两侧的小层和容器的左右边缘对齐，中间间隔10像素，而这六个小层是循环的，都要用同一个样式我从来没仔细考虑过这个问题，想问问前辈一般都怎么解决。</a></p><br /> <div class="z">◆</div><br /> <div class="y">◆</div><br /> </div><br /> </div><br /> <div class="w t400 l680"><br /> <div class="x"><p><a href="#">鼠标移到图标上：就显示那张红图鼠标移到图标上：就显示那张红图鼠标移到图标上：就显示那张红图 </a></p><br /> <div class="z">◆</div><br /> <div class="y">◆</div><br /> </div><br /> </div<br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

纯CSS无图实现阴影和小三角提示框代码

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

纯CSS无图实现阴影和小三角提示框代码

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性