css阴影边框的设置方法:首先新建一个html文件;然后在这个html文件上创建两个【
】用来设置阴影边框;最后这两个div添加样式类为in、out。本教程操作环境:windows10系统、css3版,DELL G3电脑,该方法适用于所有品牌电脑。
css阴影边框的设置方法:
1、打开前端开发工具,新建一个html文件,然后在这个html文件上创建两个
用来设置阴影边框,最后这两个div添加样式类为: in、out。如图:代码:
<div class="out">外部边框阴影</div> <div class="in">内部边框阴影</div>登录后复制2、设置边框阴影。对这两个的样式类设置大小,宽高,最后使用box-shadow设置阴影边框。如图:
css代码:
<style type="text/css"> .out,.in{ width:300px; height: 150px; border:1px solid #BFBFBF; margin: 20px auto; } .out{ box-shadow:0px 0px 10px 5px #aaa; } .in{ box-shadow:0px 0px 10px 5px #aaa inset; } </style>登录后复制3、保存html文件后使用浏览器打开即可看到效果。如图:
4、所有代码。可以直接复制所有代码到新建的html文件上,粘贴保存后使用浏览器打开即可看到效果。
所有代码:
<style type="text/css"> .out,.in{ width:300px; height: 150px; border:1px solid #BFBFBF; margin: 20px auto; } .out{ box-shadow:0px 0px 10px 5px #aaa; } .in{ box-shadow:0px 0px 10px 5px #aaa inset; } </style> <div class="out">外部边框阴影</div> <div class="in">内部边框阴影</div> 登录后复制相关教程推荐:CSS视频教程
以上是css阴影边框怎么设置的详细内容。更多信息请关注PHP中文网其他相关文章!
相关标签:来源:php.cn本站声明本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn作者最新文章
2023-04-09 22:44:01 2021-05-21 15:21:45 2023-04-09 22:42:01 2023-03-09 12:50:01 2023-01-05 16:13:24 2023-01-05 16:13:23 2021-04-30 16:46:04 2023-01-05 16:13:23 2023-01-05 16:13:22 2021-04-30 16:27:19最新问题页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面,我昨天做了一部分,效果很好,今天我继续做剩下的部分,一切都很好。当我尝试将其作为普通html页面打开时,CSS或BOOTSTRAP不起作用,仅显示页面文本,...来自于 2024-04-06 21:58:0401800动态修改Javafx中的内联CSS样式 我试图在应用程序最大化时更改窗格的背景图像。我的背景是使用内嵌css设置的。我为样式设置了两个不同的变量和一个if语句。但是,我没有运气让它改变样式。StringcssStyle=...来自于 2024-04-06 20:57:1601487如何在 CSS 中使浮动元素垂直堆叠而不是水平堆叠? 我正在尝试制作一个包含两列的网页,一侧具有主要内容,另一侧具有额外的内容。但是因为我使用浮动属性将额外的列向左对齐,所以它水平堆叠,但我希望它垂直堆叠。我当前的代码:.topich...来自于 2024-04-06 20:45:2602386有没有办法强制弹性框中的文本垂直居中,无论我们有什么其他 CSS 代码? 我有以下CSS代码,它是我正在开发的网站中使用的更大CSS代码的一部分:.cards-u{display:flex;flex-wrap:wrap;justify-content:c...来自于 2024-04-06 20:41:5101518