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

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

导读：纯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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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