网站首页 健康小知识 母婴教育 起名 运动知识 职场理财 情感生活 绿色生活 游戏数码 美容 特色美食 爱好

css3如何实现边框阴影

栏目: IT技术 / 发布于: / 人气:3.2W

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

工具/材料

Sublime Text

操作方法

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

css3如何实现边框阴影

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

css3如何实现边框阴影 第2张

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

css3如何实现边框阴影 第3张

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

css3如何实现边框阴影 第4张
Tags:css3 边框