打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
纯CSS无图实现DIV边框平滑阴影
纯CSS无图实现DIV边框平滑阴影,利用1像素的原理而制作的阴影效果,让每个嵌套的DIV CLASS元素向外延伸一像素,颜色递减,这样就实现了阴影效果,而且效果不错。
<!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=gb2312" />
<title>CSS边框阴影</title>
<style type="text/css">
div {border-width: 1px; border-style: solid; padding: 1px;padding:1px;}
.a {background-color: #F3F3F3; border-color: #FBFBFB;}
.b {background-color: #D8D8D8; border-color: #E8E8E8;}
.c {background-color: #FFF; border-color: #BBB; height: 100px;color:#ff0000;}
</style>
</head>
<body>
<div class="a">
  <div class="b">
    <div class="c">源码爱好者(CodeFans.net)提供编程源码、书籍教程、JavaScript/CSS特效代码以及常用软件下载等。</div>
  </div>
</div>
</body>
</html>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
CSS实现半透明div层的方法
[译文]CSS实现图片阴影效果三部曲 - WEB标准化专栏 -
【聊代码】第七十集 css样式(之四十)图片扭动
css3新增边框、阴影、边框、背景、文本、字体
了解CSS盒状模型 设计更佳网页
你未必知道的10个CSS技巧|中文方案文档站(提供各类方案下载,WORD文档下载,范文,案...
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服