设为首页收藏本站关注微信<<< 抵制 IE6 人人有责 >>>
搜索
热搜: 活动 交友 discuz
查看: 3427|回复: 7

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

[复制链接]
发表于 2015-8-23 13:41:53 | 显示全部楼层 |阅读模式
  1. .shadow{ box-shadow: 0 0 3px #000;}
复制代码


本帖被以下淘专辑推荐:

  • · 常用|主题: 22, 订阅: 0
回复

使用道具 举报

 楼主| 发表于 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>

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

本帖子中包含更多资源

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

x
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-8-23 13:58:45 | 显示全部楼层
RGB与16进制色互转  http://tool.css-js.com/rgba.html
回复 支持 反对

使用道具 举报

 楼主| 发表于 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>

  14. <body>
  15. <div id="s3">
  16.   <div class="s4">
  17.     <ul>
  18.       <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>
  19.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=702" title="溢出超出DIV边框的内容自动隐藏方法" target="_blank">溢出超出DIV边框的内容自动隐藏方法</a></li>
  20.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=704" title="CSS 几种被忽略但是很有意思的标签" target="_blank">CSS 几种被忽略但是很有意思的标签</a></li>
  21.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=721" title="10个顶级学习CSS的网站" target="_blank">10个顶级学习CSS的网站</a></li>
  22.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=746" title="网页设计中黄金分割线布局的应用" target="_blank">网页设计中黄金分割线布局的应用</a></li>
  23.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=765" title="自适应移动设备页面的css设计" target="_blank">自适应移动设备页面的css设计</a></li>
  24.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=827" title="利用媒体查询进行响应式设计" target="_blank">利用媒体查询进行响应式设计</a></li>
  25.       <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>
  26.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=852" title="将DIV固定在页面头部和底部" target="_blank">将DIV固定在页面头部和底部</a></li>
  27.       <li><a href="http://www.kevin-ying.com/forum.php?mod=viewthread&tid=853" title="div圆角" target="_blank">div圆角</a></li>
  28.     </ul>
  29.     本教程来自源与生活-社区 by:www.kevin-ying.com
  30.   </div>
  31. </div>
  32. </body>
  33. </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
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-8-23 14:53:02 | 显示全部楼层
总之是好东西
回复 支持 反对

使用道具 举报

 楼主| 发表于 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下就不用加前缀。
回复 支持 反对

使用道具 举报

 楼主| 发表于 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
回复 支持 反对

使用道具 举报

 楼主| 发表于 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*/

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

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

GMT+8, 2024-3-29 20:17 , Processed in 0.124800 second(s), 31 queries .

Powered by Mr.Kevin-ying

© 2004-2015

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