一款用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. IIS 7.5: HOW TO ENABLE TLS 1.1 AND TLS 1.2

    In IIS 7.5, which is installed on Windows 2008 R2 servers, only SSL 3.0 and TLS 1.0 are enabled for ...

  2. 小议IE10下的DrawToBitmap方法

    在完成博文“PS网页设计教程XXIV——从头设计一个漂亮的网站”后. 出于习惯,打开之前“利用Webbrowser类实现超长网页的截屏的实现(解决报错不能截取的难题)”中的代码的程序,截取博文作为资料 ...

  3. android自己定义进度值可拖动的seekbar

    近期忙找实习,加上实验室在推新项目,须要学习新知识.所以非常长一段时间没去整理了官博客了,github也蛮久没更新.非常羞愧.接下来还是要坚持写. 今天就简单的写一下我在项目中用到的算自己定义seek ...

  4. GOOD BLOG URL

    1TEST http://www.cnblogs.com/Javame/p/3653509.html 综合 http://shiyanjun.cn/

  5. Android Device Monitor工具的使用

    在最新的Android Studio3.x版本中,已经去掉了Android Device Monitor工具,但是不代表Android Device Monitor工具就不能用了,找到sdk的目录: ...

  6. Mysql查询数据库表结构以及字段类型并展示

    1.建表语句sys_user CREATE TABLE `sys_user` ( `id` varchar(32) NOT NULL COMMENT '编号', `dept_id` varchar(3 ...

  7. 12 个非常实用的 jQuery 代码片段

    jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助. 导航菜单背景切换效果 ...

  8. MySQL事物系列：2：事物的实现

    1:事物的隔离性由锁来实现.事物的持久性和事物的原子性通过redo log来实现.事物的一致性通过undo log来实现. redo log恢复提交事物修改的页操作 undo log回滚到行记录某个特 ...

  9. sell 项目 订单表 设计 及 创建

    1.数据库设计 2.订单表 创建 /** * 订单表 */ create table `order_master` ( `order_id` varchar(32) not null, `buyer_ ...

  10. ES6 class 技术点拾遗

    语法 方法不需要加function,方法之间不需要加分号 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() ...