CSS 如何实现让div的四个边框都有阴影的效果？_随笔

<title>css怎么给4个边框添加阴影</title>

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

边框阴影（box-shadow）的基本语法：

box-shadow：color h-shadow v-shadow blur spread inset；

color：阴影颜色 ------------ 可选

h-shadow ：水平偏移量 ----必选

v-shadow：垂直偏移量-----必选

blur：模糊距离 -------------可选

spread：阴影尺寸---------- 可选

inset：内阴影 --------------可选

例子：

css部分：

.div1{

width:200px

height:200px

margin:20px auto

line-height: 200px

text-align: center

background: cadetblue

border:2px solid darkslategray

box-shadow: darkgrey 10px 10px 30px 5px //边框阴影

}

html部分：

<div class="div1">边框阴影示例</div>

效果如图：

我们在制作网页的时候可以用CSS3添加边框，那么如果要给边框添加阴影该怎么做呢？下面我给大家分享一下。

工具/材料

SublimeText

首先打开Sublime Text软件，新建一个HTML文档，如下图所示

然后在html文档的Body区域插入一个div，如下图所示

接下来给div定义一些样式，注意其中的box-shadow就是定义边框阴影的，如下图所示

最后我们运行界面程序，你会看到边框已经被添加上阴影了，如下图所示

欢迎分享，转载请注明来源：内存溢出

CSS 如何实现让div的四个边框都有阴影的效果？