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

发布时间：2018-08-18 01:01:56 所属栏目：活动来源：站长网

导读：纯CSS无图实现阴影和小三角提示框代码，css模拟阴影和小三角，tip提示效果，用面向对象的思想去书写css,用面向对象的心态去书写css。那个提示的小三角是代码的亮点，也是核心，用纯CSS代码实现，模拟阴影的原理： 1、用一个层做背景层，背景颜色填充成阴影

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

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!