本文摘自PHP中文网,作者coldplay.xixi,侵删。
css阴影边框的设置方法:首先新建一个html文件;然后在这个html文件上创建两个【<div>】用来设置阴影边框;最后这两个div添加样式类为in、out。
本教程操作环境:windows10系统、css3版,DELL G3电脑,该方法适用于所有品牌电脑。
css阴影边框的设置方法:
1、打开前端开发工具,新建一个html文件,然后在这个html文件上创建两个<div>用来设置阴影边框,最后这两个div添加样式类为: in、out。如图:
代码:
1 2 |
|
2、设置边框阴影。对这两个的样式类设置大小,宽高,最后使用box-shadow设置阴影边框。如图:
css代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
3、保存html文件后使用浏览器打开即可看到效果。如图:
4、所有代码。可以直接复制所有代码到新建的html文件上,粘贴保存后使用浏览器打开即可看到效果。
所有代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
相关教程推荐:CSS视频教程
以上就是css阴影边框怎么设置的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
vertical-align负值和margin-bottom负值的差异有哪些?
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者