一款用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>

效果图

需要两张图片

HTML CSS边框阴影的实现的更多相关文章

  1. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  2. css边框阴影

    <style type="text/css">.mydiv{width:250px;height:auto;border:#909090 1px solid;backg ...

  3. 来看下css边框阴影怎么设置？这些方法掌握后工作更轻松

    我们在网页设计中,通常会使用ps工具来达到图片或者边框阴影.立体等效果.但是如果一些基础效果都需要用p图来完成那就显得效率比较低了.其实可以使用CSS来设置边框阴影,下面本篇文章来给大家介绍一下. 在 ...

  4. css边框阴影问题

    阴影落在下方:box-shadow: 0 3px 5px rgba(0, 0, 0, .2); 阴影落在四周:box-shadow: 0 3px 5px rgba(0, 0, 0, .2), 0 0 ...

  5. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  6. Html/CSS前端如何实现文字边框阴影

    上次我们聊了<Html5前端如何实现文字阴影>,其实在开发中现在对于阴影效果的使用已经越来越广泛了,那么今天我们就来说一说用同样的手法实现边框阴影. 一.边框阴影box-shadow 边框 ...

  7. CSS入门（css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影）

    一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...

  8. css设置边框阴影;box-shadow的使用

    html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  9. css边框样式、边框配色、边框阴影、边框圆角、图片边框

     边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...

随机推荐

  1. 基于PHP构建OAuth 2.0 服务端 认证平台

    OAuth2.0 认证服务 安装 你可以在github上下载OAuth Server PHP,也可以用下列命令下载,不过内容都是一样的 mkdir my-oauth2-walkthrough cd m ...

  2. 机器学习之深入理解SVM

    在浏览本篇博客之前,最好先查看一下我写的还有一篇文章机器学习之初识SVM(点击可查阅哦).这样能够更好地为了结以下内容做铺垫! 支持向量机学习方法包括构建由简至繁的模型:线性可分支持向量机.线性支持向 ...

  3. Lintcode: Add Binary

    C++ class Solution { public: /** * @param a a number * @param b a number * @return the result */ str ...

  4. Windows 下 Git 安装与初始配置

    官方下载地址:https://git-scm.com/download/win,我下载的最新版是 Git-2.15.1.2-64-bit.exe . Windows 下安装步骤 1.相关信息,直接“ ...

  5. cocoahttpserver使用具体解释（二）

    接下来,我们接着去学习怎样去接收处理web上传的数据 1 首先我们创建一个 @interface WTZHTTPConnection : HTTPConnection 在这个类中我们用于处理接受文件并 ...

  6. 数组排序 -- 结合sort和函数排序

    结合sort和函数排序: 数组由小到大进行排序:sort,sortnum; var arr = [3,43,23,45,65,90]; function sortnum(a,b){ return a- ...

  7. Shell与Bash

    1:Shell编程的本质 Shell的意思是“壳程序”,它是一个视窗,供我们交互. 系统中有许多负责不同功能的可执行文件,他们被添加到PATH变量后,我们就可以在Shell中通过命令行调用.这些这些可 ...

  8. Python实现支付宝当面付之——扫码支付

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7680348.html 一:配置信息准备 登录蚂蚁金服开放平台:https://open.alipay.com/ ...

  9. coco2d-js 触摸移动的同时处理点击事件

    cc.eventManager.addListener({ event: cc.EventListener.TOUCH_ALL_AT_ONCE, onTouchesMoved:function (to ...

  10. spring & java 面试

    https://blog.csdn.net/u014079773/article/details/52453002 1.Spring中AOP的应用场景.Aop原理.好处? 答:AOP--Aspect ...