设为首页收藏本站关注微信<<< 抵制 IE6 人人有责 >>>
开启辅助访问 切换到窄版
搜索
热搜: 活动 交友 discuz
返回列表 发新帖
查看: 3984|回复: 7
打印 上一主题 下一主题

[CSS3] css3实现让div的四个边框都有阴影的效果

[复制链接]
kevin-ying
跳转到指定楼层
楼主
发表于 2015-8-23 13:41:53 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
  1. .shadow{ box-shadow: 0 0 3px #000;}
复制代码


CSS3, CSS, 常用

本帖被以下淘专辑推荐:

  • · 常用|主题: 22, 订阅: 0
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享淘帖1

相关帖子
回复

使用道具 举报

kevin-ying
8#
 楼主| 发表于 2015-9-16 16:44:51 | 只看该作者
[CSS] 纯文本查看 复制代码
filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=3);/*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*/

回复 支持 反对

使用道具 举报

kevin-ying
7#
 楼主| 发表于 2015-9-1 02:22:38 | 只看该作者

css3 box-shadow 内阴影与外阴影


1-

box-shadow具体使用方法，语法：

  1. E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
复制代码

换句说：对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}


取值：投放方式：默认是外阴影 ，



box-shadow属性至多有6个参数设置，他们分别取值：

阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；

X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；

Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小


  1. -moz-box-shadow:5px 5px 5px #999 inset; -webkit-box-shadow:5px 5px 5px #999 inset; box-shadow:5px 5px 5px #999 inset;
复制代码

  1. -moz-box-shadow:-5px -5px 5px #999 inset; -webkit-box-shadow:-5px -5px 5px #999 inset; box-shadow:-5px -5px 5px #999 inset;
复制代码


本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？免费注册

x
回复 支持 反对

使用道具 举报

kevin-ying
6#
 楼主| 发表于 2015-9-1 02:21:00 | 只看该作者
-moz-, -webkit-, -o-这些都是浏览器前缀。
常用前缀和浏览器的对应关系如下：

Firefox: -moz-
Chrome, Safari: -webkit-
Opera: -o-
IE: -ms-

css标准中各个属性也要经历从草案(WD)到推荐(REC)的过程，css3中的属性进展都不一样。浏览器厂商在标准尚未明确情况下提前支持会有风险，同时也会出现有的浏览器厂商支持的好，有的支持的不好，所以就用厂商前缀加以区分。
PPK建议如果已成为REC或接近REC的属性，厂商如果完全实现了w3c的test case，就不用加厂商前缀，像border-radius在ie9下就不用加前缀。
回复 支持 反对

使用道具 举报

kevin-ying
5#
 楼主| 发表于 2015-8-23 14:53:02 | 只看该作者
总之是好东西
回复 支持 反对

使用道具 举报

kevin-ying
地板
 楼主| 发表于 2015-8-23 14:19:28 | 只看该作者
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>by:kevin-ying.com</title>
  6. <style>
  7. body{ background-color:#F00;}
  8. div,li,ul{ margin:0; padding:0;}
  9. li{ list-style:none;}
  10. #s3 {padding:20px;width:500px;margin:auto;background:#fff;background:rgba(255,235,205, 0.7);filter:Alpha(Opacity=20);box-shadow:10px 10px 20px rgba(0,0,0,0.8); border:1px #FFFCDF double;}
  11. .s4 {width:500px;background:#fff; line-height:20px; text-align:center;}
  12. </style>
  13. </head>

  15. <body>
  16. <div id="s3">
  17.   <div class="s4">
  18.     <ul>
  19.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=701" title="DIV CSS text-transform英文字母全大写小写_CSS首字母大写" target="_blank">DIV CSS text-transform英文字母全大写小写_CSS首字母大写</a></li>
  20.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=702" title="溢出超出DIV边框的内容自动隐藏方法" target="_blank">溢出超出DIV边框的内容自动隐藏方法</a></li>
  21.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=704" title="CSS 几种被忽略但是很有意思的标签" target="_blank">CSS 几种被忽略但是很有意思的标签</a></li>
  22.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=721" title="10个顶级学习CSS的网站" target="_blank">10个顶级学习CSS的网站</a></li>
  23.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=746" title="网页设计中黄金分割线布局的应用" target="_blank">网页设计中黄金分割线布局的应用</a></li>
  24.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=765" title="自适应移动设备页面的css设计" target="_blank">自适应移动设备页面的css设计</a></li>
  25.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=827" title="利用媒体查询进行响应式设计" target="_blank">利用媒体查询进行响应式设计</a></li>
  26.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=834" title="css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况" target="_blank">css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况</a></li>
  27.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=852" title="将DIV固定在页面头部和底部" target="_blank">将DIV固定在页面头部和底部</a></li>
  28.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=853" title="div圆角" target="_blank">div圆角</a></li>
  29.     </ul>
  30.     本教程来自源与生活-社区 by:www.kevin-ying.com
  31.   </div>
  32. </div>
  33. </body>
  34. </html>
复制代码


效果:


关于filter:alpha()的写法

1. Alpha：设置透明度

Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。

FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。

Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。

StartX和StartY：代表渐变透明效果的开始X和Y坐标。

FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。



本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？免费注册

x
回复 支持 反对

使用道具 举报

kevin-ying
板凳
 楼主| 发表于 2015-8-23 13:58:45 | 只看该作者
RGB与16进制色互转  http://tool.css-js.com/rgba.html
回复 支持 反对

使用道具 举报

kevin-ying
沙发
 楼主| 发表于 2015-8-23 13:46:17 | 只看该作者
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>by:kevin-ying.com</title>
  6. <style>
  7. form,p{margin-bottom:30px; margin-left:20px;}
  8. .shadow,.one,.two,.three,.four,.five,.six{
  9. height:50px;
  10. width:280px;
  11. border:1px solid #CCC;
  12. }
  13. .shadow{
  14. -moz-box-shadow: inset 0 0 10px #CCC;
  15. -webkit-box-shadow: inset 0 0 10px #CCC;
  16. box-shadow: inset 0 0 10px #CCC;
  17. }
  18. .one{
  19.   -moz-box-shadow:5px 5px;
  20.      -webkit-box-shadow:5px 5px;
  21.      box-shadow:5px 5px;
  22. }
  23. .two{
  24.   -moz-box-shadow:2px 2px 10px #06c;
  25.      -webkit-box-shadow:2px 2px 10px #06c;
  26.      box-shadow:2px 2px 10px #06c;
  27. }
  28. .three{
  29.   -moz-box-shadow:0 0 10px #06c;
  30.      -webkit-box-shadow:0 0 10px #06c;
  31.      box-shadow:0 0 10px #06c;
  32. }
  33. .four{
  34. -moz-box-shadow:0 0 10px 10px #06c;
  35.     -webkit-box-shadow:0 0 10px 10px #06c;
  36.     box-shadow:0 0 10px 10px #06c;
  37. }
  38. .five{
  39. -moz-box-shadow:inset 5px 5px 10px #06c;
  40.     -webkit-box-shadow: inset 5px 5px 10px #06c;
  41.     box-shadow: inset 5px 5px 10px #06c;
  42. }
  43. .six{
  44. -moz-box-shadow:0 0 10px red,
  45.                                    2px 2px 10px 10px yellow,
  46.                                    4px 4px 12px 12px green;
  47.     -webkit-box-shadow:0 0 10px red,
  48.                                    2px 2px 10px 10px yellow,
  49.                                    4px 4px 12px 12px green;
  50.     box-shadow:0 0 10px red,
  51.                                    2px 2px 10px 10px yellow,
  52.                                    4px 4px 12px 12px green;
  53. }
  54. </style>
  55. </head>

  57. <body>
  58. <form>
  59.   输入框内阴影 <input class="shadow" type="text" name="name" />
  60. </form>
  61. <p class="one">简单效果:</p>
  62. <p class="two">虚阴影效果:</p>
  63. <p class="three">渐变阴影效果:</p>
  64. <p class="four">带光晕效果:</p>
  65. <p class="five">内阴影效果:</p>
  66. <p class="six">彩色阴影:</p>
  67. </body>
  68. </html>
复制代码
效果:

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？免费注册

x
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|手机版|Archiver|源于生活(个人生活娱乐工作的笔记)css3,html5,学习笔记    

GMT+8, 2024-11-23 21:00 , Processed in 0.109200 second(s), 29 queries .

Powered by Mr.Kevin-ying

© 2004-2015

快速回复 返回顶部 返回列表