css阴影边框怎么设置
程序员文章站
2022-04-05 14:15:49
...
css阴影边框的设置方法:首先新建一个html文件;然后在这个html文件上创建两个【<div>】用来设置阴影边框;最后这两个div添加样式类为in、out。
本教程操作环境:windows10系统、css3版,DELL G3电脑,该方法适用于所有品牌电脑。
css阴影边框的设置方法:
1、打开前端开发工具,新建一个html文件,然后在这个html文件上创建两个<div>用来设置阴影边框,最后这两个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文件上,粘贴保存后使用浏览器打开即可看到效果。
所有代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <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> </head> <body> <div class="out">外部边框阴影</div> <div class="in">内部边框阴影</div> </body> </html>
相关教程推荐:CSS视频教程
以上就是css阴影边框怎么设置的详细内容,更多请关注其它相关文章!
上一篇: ps裁切快捷键是什么
下一篇: ps怎么用蒙版抠图
推荐阅读
-
WPS文字怎么设置页面如分隔符、背景、页面边框等等
-
织梦无法放在二级目录 放在二级目录之后 所有的图片 还有css文件全都不显示了 哪位高手知道怎么回事 咋设置
-
CSS盒子模型/PS基操/圆角边框/盒子阴影/文字阴影/案例
-
黄聪:CSS+DIV 设置圆角边框加阴影效果_html/css_WEB-ITnose
-
css3:box-shadow边框阴影属性值详解_html/css_WEB-ITnose
-
不知大家遇到过这种问题么,一个层宽度设为100%,并设置背景图片,在浏览器中浏览,缩小窗口到滚动条出现,然后拖动滚动条到右侧,右侧的区域变成空白,怎么解决?_html/css_WEB-ITnose
-
css怎么设置文本框宽度
-
css怎么设置a标签颜色
-
css如何设置不规则阴影
-
css怎么设置宽为100vw