CSS控制背景图像平铺实现边框阴影效果
一种独特的CSS技巧:背景图像平铺与区域边框阴影的融合
今天,我想与大家分享一种特别的CSS技巧。通过巧妙地控制背景图像的平铺,我们可以实现区域边框的阴影效果。虽然这涉及到图片的使用,但其真正的价值在于,无论你需要为多大的区域添加阴影,这段代码都能自动适应,并且兼容所有IE浏览器。这是一种极具创意且实用的技术,绝对值得收藏。
下面是一段简单的HTML代码示例,配合CSS样式,展示了如何利用背景图像实现边框阴影效果。请仔细阅读并理解其中的每一行代码,因为每一个细节都为最终的效果增色不少。
复制代码如下:
```html
/ 定义阴影效果的主要样式 /
.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; / 设置外边距 /
width: 360px; / 设置宽度 /
padding: 0px; / 设置内边距 /
}
/ 定义内部盒子的样式 /
nerbox {
position: relative; / 相对定位 /
bottom: 6px; / 距离底部6像素 /
right: 6px; / 距离右侧6像素 /
border: 1px solid 999999; / 设置边框样式 /
padding: 4px; / 设置内边距 /
margin: 0px; / 设置外边距 /
}
/ 针对IE5的hack技巧,用于调整布局问题 /
nerbox { / IE5 hack / margin: 0px 0px -3px 0px; margin: 0px 0px 0px 0px; } / 注意这里的hack已经通过第二个margin声明覆盖掉前一个设置 /
/ 设置内部段落样式 /
nerbox p { font-size: 14px; margin: 3px; } / 设置字体大小和段落边距 /
CSS阴影:
这段边框阴影效果怎么样呢?
编程语言
- CSS控制背景图像平铺实现边框阴影效果
- 体育O2O创业: 起步不难行路难
- Dreamweaver主次浏览器怎么设置-
- 安卓应用下载量是iOS的两倍
- ai怎么设计博士头像- ai博士人物形象的绘制方法
- HTML5 embed标签定义和用法详解
- 创建超链接及css 样式设置
- 域名投资人三年来投资域名的感悟
- CSS实现限制字数功能当对象内文本溢出时显示省
- FreeHand添加色库文件到填色面板方法介绍(图文)
- 5种方法快速去掉HTML中Inline-Block的空白
- 使用CSS媒体查询创建响应式布局教程
- win10预览版17634升级到17639系统变慢该怎么办-
- 3Dsmax怎么绘制文化石模型-
- Win10正式版文件资源管理器并未加入标签页 用户
- 冬季拍摄冰雪场景的技巧有哪些?