CSS 如何实现让div的四个边框都有阴影的效果？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 如何实现让div的四个边框都有阴影的效果？相关的知识，希望对你有一定的参考价值。
用三个div叠加的方法我试过，给html加了个背景色就不行了，还有没有别的方法？
<title>css怎么给4个边框添加阴影</title>
<style type="text/css">
span box-shadow: 2px 4px 6px #000; </style>
</head> <body> <span>百度知道“css怎么给4个边框添加阴影”</span> </body>
简单的解释一下相关的代码属性
box-shadow: 2px 4px 6px #000
首先2px : 表示水平阴影的位置，然后4px : 表示垂直阴影的位置，接着5px : 表示模糊距离，最后#000 ： 表示阴影的颜色（#000 黑色）
拓展资料：
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
参考资料：百度百科-CSS
用CSS3中的box-shadow属性就可以了
.classbox-shadow: 1px 1px 5px 5px #888888; 参考技术BCSS 实现让div的四个边框都有阴影的效果：
首先：
HTML代码
<h1>CSS 如何实现让div的四个边框都有阴影的效果？</h1>
<div class="g1">
<div class="g2"></div>
</div>
CSS代码
bodybackground:#f00;
htmlbackground:#f00;/*html加背景色*/
.g1
width:500px;
height:500px;
border:2px solid #fff;
margin:30px auto;
background-color:#fff;
box-sizing:border-box;
.g2
width:400px;
height:400px;
margin:50px auto;
border:2px solid #000;
box-shadow:5px 5px 5px #000,5px -5px 5px #000,-5px 5px 5px #000,-5px -5px 5px #000;
具体效果：
使用CSS3中的box-shadow属性“.classbox-shadow: 1px 1px 5px 5px #888888;”即可。
拓展资料：
1、CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2、CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
还是border-radius属性，将div边框（border）的四个直角变成圆角
参考技术A 下面给出class，你可以写在css文件里面，然后把要改的div class属性引入radius这个就行了。/*将div的border变成圆角*/
.radius
border-radius: 8px 8px 8px 8px; /*这四个值的大小代表角的大小，顺序上右下左*/
以上是关于CSS 如何实现让div的四个边框都有阴影的效果？的主要内容，如果未能解决你的问题，请参考以下文章