css3如何实现边框阴影

html-css028

css3如何实现边框阴影,第1张

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

工具/材料

SublimeText

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

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

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

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

设置边框阴影不会影响盒子的布局,即不会影响其兄弟元素的布局

spread可以与blur、h-shadow、v-shadow相互抵消,blur不可为负值

可以设置多重边框阴影,实现更好的效果,增强立体感。by三人行慕课