CSS 边框 阴影 效果

CSS 边框 阴影 效果

大家好,又见面了,我是全栈君。

CSS 边框 阴影 效果

以下将css实现阴影效果,以便须要朋友们,直接上代码

#shadow1{
width: 200px;
height: 100px;
color: white;
background-color: red;
box-shadow: 5px -5px 1px 1px #000;
-webkit-box-shadow:5px -5px 1px 1px #000;
-moz-box-shadow:5px 5px 1px 1px #000;
    /* For IE 8 */
    -ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=120, Color=’#1000′);
    /* For IE 5.5 – 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=125, Color=’#1000′);
}

CSS 边框 阴影 效果

#shadow2{
width: 420px;
height: 650px;
background: url(1.jpg) no-repeat;
margin-top: 20px;
box-shadow: 10px 8px 10px 3px #000;  /*Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+*/
-webkit-box-shadow: 10px 8px 10px 3px #000;
-moz-box-shadow: 10px 8px 10px 3px #000;
/*background-clip: padding-box;*/
opacity: 0.9; /*透明度*/
}

CSS 边框 阴影 效果

阴影的样例就到这里,文章简陋。不足之处还请大神多多指正。谢谢…

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/115561.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • PAT日志 1146「建议收藏」

    PAT日志 1146「建议收藏」顽强的小白1146TopologicalOrder(25分)ThisisaproblemgivenintheGraduateEntranceExamin2018:WhichofthefollowingisNOTatopologicalorderobtainedfromthegivendirectedgraph?Nowyouare…

    2022年6月9日
    28
  • 国内好的破解软件下载站

    国内好的破解软件下载站MSDNhttps://msdn.itellyou.cn/吾爱破解:https://www.52pojie.cn/爱学府软件园:https://www.52pojie.cn/HKC资源网:https://zy.hongkexueyuan.com/0DayDownhttp://www.0daydown.com/奥学网https://6so.so/果核剥壳http://www.ghboke…

    2022年6月11日
    124
  • 信号分析与处理1「建议收藏」

    信号分析与处理1「建议收藏」(此帖引至网络资源,仅供参考学习)第一:频谱一.调用方法X=FFT(x);X=FFT(x,N);x=IFFT(X);x=IFFT(X,N)用MATLAB进行谱分析时注意:(1)函数FFT返回值的数据结

    2022年8月4日
    2
  • java后端开发框架有哪些(java后端需要学哪些框架)

    Javaweb开发框架了解web开发前端–页面的设计、路由、展示—静态资源(HTML、CSS、JS)–web服务器(nginx)–Vue技术栈开发后端–对外提供(类)RESTful风格的API—数据库交互–web应用服务器(tomcat)–Spring技术栈开发交互–HTTP协议通信–JSON格式–RESTful风格javaweb开发框架的变迁…

    2022年4月15日
    87
  • python tkinter窗口美化_jquery进度条插件

    python tkinter窗口美化_jquery进度条插件前言在我们进行自动化测试的时候,用例往往是成百上千,执行的时间是几十分钟或者是小时级别。有时,我们在调试那么多用例的时候,不知道执行到什么程度了,而pytest-sugar插件能很好解决我们的痛点。

    2022年7月29日
    3
  • Response.ContentType 详细列表

    Response.ContentType 详细列表Response.ContentType详细列表不同的ContentType会影响客户端所看到的效果.默认的ContentType为text/html也就是网页格式.代码如:显示的为网页,而则会显示html原代码.以下为一些常用的ContentTypeGIFimagesJPEG

    2022年7月19日
    14

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号