CSS 如何实现让div的四个边框都有阴影的效果？ css怎么给4个边框添加阴影
CSS \u4e00\u4e2aDIV\u6709\u56db\u6761\u8fb9\uff0c\u600e\u4e48\u8ba9\u53ea\u6709\u4e0b\u9762\u4e00\u6761\u8fb9\u6709\u9634\u5f71\uff1f\u9700\u8981\u51c6\u5907\u7684\u6750\u6599\u5206\u522b\u6709\uff1a\u7535\u8111\u3001\u6d4f\u89c8\u5668\u3001html\u7f16\u8f91\u5668\u3002
1\u3001\u9996\u5148\uff0c\u6253\u5f00html\u7f16\u8f91\u5668\uff0c\u65b0\u5efahtml\u6587\u4ef6\uff0c\u4f8b\u5982\uff1aindex.html\u3002
2\u3001\u5728index.html\u4e2d\u7684\u6807\u7b7e\u4e2d\uff0c\u8f93\u5165css\u4ee3\u7801\uff1a
div{width: 250px;height: 100px;border: 5px solid blue;box-shadow: 0px 20px 20px -20px #5E5E5E;}
3\u3001\u6d4f\u89c8\u5668\u8fd0\u884cindex.html\u9875\u9762\uff0c\u6b64\u65f6\u53ea\u6709div\u5e95\u90e8\u7684\u8fb9\u6709\u9634\u5f71\u6548\u679c\u3002
css\u600e\u4e48\u7ed94\u4e2a\u8fb9\u6846\u6dfb\u52a0\u9634\u5f71 span{ box-shadow: 2px 4px 6px #000; } \u767e\u5ea6\u77e5\u9053\u201ccss\u600e\u4e48\u7ed94\u4e2a\u8fb9\u6846\u6dfb\u52a0\u9634\u5f71\u201d CSS\u5c5e\u6027\u89e3\u91ca\uff1a
box-shadow: 2px 4px 6px #000;2px : \u8868\u793a\u6c34\u5e73\u9634\u5f71\u7684\u4f4d\u7f6e
4px : \u8868\u793a\u5782\u76f4\u9634\u5f71\u7684\u4f4d\u7f6e
5px : \u8868\u793a\u6a21\u7cca\u8ddd\u79bb
#000 \uff1a \u8868\u793a\u9634\u5f71\u7684\u989c\u8272\uff08#000 \u9ed1\u8272\uff09
\u6700\u540e\u7684\u6548\u679c\u5982\u4e0b\uff1a
<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属性就可以了
.class{box-shadow: 1px 1px 5px 5px #888888;}
CSS 实现让div的四个边框都有阴影的效果：
首先：
HTML代码
<h1>CSS 如何实现让div的四个边框都有阴影的效果？</h1>
<div class="g1">
<div class="g2"></div>
</div>
CSS代码
body{background:#f00;}
html{background:#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属性“.class{box-shadow: 1px 1px 5px 5px #888888};”即可。
拓展资料：
1、CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2、CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
做成有阴影效果的图片 在css里面写background
扩展阅读：html+css网页制作成品 ... div css页面布局 模板 ... 表格怎么去除#div0 ... css怎么让两个div在一排 ... css div高度自适应 ... 如何让div在页面垂直居中 ... div css布局完整代码 ... css让两个div并排 ... css如何让div中的元素居中 ...
