<style type="text/css">
.mydiv{
width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/
-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
-webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
box-shadow:2px 2px 10px #909090;/*opera或ie9*/
}
</style>

for ie:
direction 阴影角度 0°为从下往上 顺时针方向
strength 阴影段长度

-moz-box-shadow: 2px 2px 10px #909090;
-webkit-box-shadow: 2px 2px 10px #909090;
box-shadow:2px 2px 10px #909090;

第一个参数是x轴阴影段长度
第二个参数是y轴阴影段长度
第三个参数是往四周阴影段长度
第四个参数是阴影段颜色
-moz-box-shadow: 2px 3px 10px #EBBD2C; -webkit-box-shadow: 2px 3px 10px #EBBD2C;box-shadow: 2px 3px 10px #EBBD2C

-webkit-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1); box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);

div代码:
<div class="mydiv">
123123213123
</div>

.shortcodestyle{margin:0px auto;-moz-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2); box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2);border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;}

圆角边框阴影:
-webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2);

-webkit 是在Chrome浏览器中用的 一般是指 浏览器是webkit核心
0 0 5px rgba(40, 173, 243, 0.5);

box-shadow的四个参数

x-offset x 轴偏移 0
y-offset y轴偏移 0
blur 模糊值 5px
color of shadow 阴影颜色
rgba(40, 173, 243, 0.5);
RGB是说颜色,A是指透明度
红40, 绿173, 蓝243, 透明度50%

css边框阴影的更多相关文章

  1. CSS 边框 阴影 效果

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

  2. HTML CSS边框阴影的实现

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

  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. C++模板(一)

    1. 模板的概念. 我们已经学过重载(Overloading),对重载函数而言,C++的检查机制能通过函数参数的不同及所属类的不同.正确的调用重载函数.例如,为求两个数的最大值,我们定义MAX()函数 ...

  2. Hive variable demo

    create table ori_trans (account string, maker string, tdate string) partitioned by (country string); ...

  3. Java性能调优笔记

    Java性能调优笔记 调优步骤:衡量系统现状.设定调优目标.寻找性能瓶颈.性能调优.衡量是否到达目标(如果未到达目标,需重新寻找性能瓶颈).性能调优结束. 寻找性能瓶颈 性能瓶颈的表象:资源消耗过多. ...

  4. javascript中的this应用

    1. this作为全局变量2. 作为对象方法的调用3. 作为构造函数调用4. apply调用 this是Javascript语言的一个关键字.它代表函数运行时,自动生成的一个内部对象,只能在函数内部使 ...

  5. ZOJ 3820 Building Fire Stations 求中点+树的直径+BFS

    题意:给一棵树,要求找出两个点,使得所有点到这两个点中距离与自己较近的一个点的距离的最大值(所有点的结果取最大的值,即最远距离)最小. 意思应该都能明白. 解法:考虑将这棵树摆直如下: 那么我们可以把 ...

  6. 最常用的DOS命令

    ping:利用它可以检查网络是否能够连通,用好它可以很好地帮助我们分析判定网络故障,如ping 127.0.0.1tracert:跟踪路由,查询到相应网站的服务器之间所需经过的路由器个数,如trace ...

  7. [转] 腾讯云直播OBS推流教程

    from: http://www.jianshu.com/p/bf4066028882 腾讯云直播OBS推流教程 字数383 阅读55 评论3 喜欢0 1.安装OBS 进入obs 官网 : https ...

  8. 22Spring_JdbcTemplatem模板工具类的使用——使用外部属性文件来配置(properties)

    前一篇文章写得是xml文件来配置数据库连接的.但是为了方便,我们实际中采用的是properties文件的方式来配置数据库的.修改properties 文件 会比 修改 xml文件 方便. 做法是: 将 ...

  9. 一个DOM元素绑定多个事件时,先执行冒泡还是捕获

    绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...

  10. 区块链技术(一):Truffle开发入门

    以太坊是区块链开发领域最好的编程平台,而truffle是以太坊(Ethereum)最受欢迎的一个开发框架,这是我们第一篇区块链技术文章介绍truffle的原因,实战是最重要的事情,这篇文章不讲原理,只 ...