HTML CSS边框阴影的实现

一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器。

复制代码
<!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>
<title>CSS边框阴影</title>
<style>
.dropshadow2{
    float:left;
    clear:left;
    background: url(/jscss/demoimg/200903/shadowAlpha.png) no-repeat bottom right !important;
    background: url(/jscss/demoimg/200903/shadow.gif) no-repeat bottom right;
    margin: 10px 0 10px 10px !important;
    margin: 10px 0 10px 5px;
    width: 360px;
    padding: 0px;
}
.innerbox{
    position:relative;
    bottom:6px;
    right: 6px;
    border: 1px solid #999999;
    padding:4px;
    margin: 0px 0px 0px 0px;
}
.innerbox{
    /* IE5 hack */
    margin: 0px 0px -3px 0px;
    margin:  0px 0px 0px 0px;
}
.innerbox p{        
    font-size:14px;
    margin: 3px;
}
</style>
</head>
<body>
<div class="dropshadow2"><div class="innerbox"><h4>CSS阴影:</h4>  <p>这段边框阴影效果怎么样呢?</p></div></div>
</body>
</html>
复制代码

效果图

需要两张图片

 

posted @   ImWiki  阅读(17574)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示