css设置边框阴影;box-shadow的使用

如何使用box-shadow设置边框阴影。
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]。投影方式有两种：inset、outset，默认投影方式outset。
将通过案例来讲述如何设置边框阴影。

操作方法

  • 01

    打开前端开发工具，新建一个html文件，然后在这个html文件上创建两个<div>用来设置阴影边框，最后这两个div添加样式类为: in、out。如图： 代码： <div class="out">外部边框阴影</div> <div class="in">内部边框阴影</div>

  • 02

    设置边框阴影。对这两个的样式类设置大小，宽高，最后使用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>

  • 03

    保存html文件后使用浏览器打开即可看到效果。如图：

  • 04

    所有代码。可以直接复制所有代码到新建的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>

赞 (0)

相关推荐

  • win10电脑的窗口没有边框如何设置边框阴影

    win10电脑的窗口没有边框如何设置边框阴影

    今天给大家介绍一下win10电脑的窗口没有边框如何设置边框阴影的具体操作步骤.1. 如图,我们打开电脑上的任意窗口,会显示边框阴影,如果没有阴影,想要添加该怎么操作呢?2. 返回桌面,找到此电脑图标, ...

  • css对div设置边框

    前端开发过程中,很多时候需要对一些标签进行边框的设置,那如何使用css设置边框样式呢?css提供了一个用于设置边框属性的border-style,可以通过border-style设置边框的线条样式. ...

  • 如何用CSS设置DIV边框透明

    如何实现用CSS设置DIV边框为透明呢?我们来看一看. 操作方法 01 透明一般认为是一种颜色属性,但是并没有这个数值.我们找到了一种让div实现透明的最佳方案,运用RGBA 02 RGBA在RGB的 ...

  • word中如何设置边框和底纹

    word中如何设置边框和底纹

    word中如何设置边框和底纹

  • Axure RP 8椭圆形元件怎么设置透明度阴影等属性?

    Axure RP 8设计软件自带有椭圆形元件,可以利用该元件设置成椭圆形.阴影.边框.填充色.还有可以利用事件点击用例设置动画效果.下面利用一个实例实现这个场景,操作如下: 1.打开Axure RP ...

  • Word2003如何设置边框

    word2003提供了很多类型的边框,这些边框可以用于表格,可以用于图片,也可以用于文档,利用边框,可以是Word文档更加美观,下面我来看看如何更Word文档中的文字添加边框. 操作方法 01 1.如 ...

  • css设置背景图片平铺方式

    css设置背景图片平铺方式 repeat:沿水平竖直两个方向平铺,这也是默认值 no-repeat:不平铺,即只显示一次 repeat-x:只沿水平方向平铺 repeat-y:只沿竖直方向平铺 操作方 ...

  • 如何在在Word2007中设置图片阴影

    使用过一段时间的Word 2007的朋友们就会发现在Word2007文档中，用户可以为选中的图片设置阴影效果。使得插入到文本中的图片效果更佳显著，给人更加强烈的视觉效果，下面是如何设置图片阴影的操作步 ...

  • word表格设置边框线颜色和样式方法

    word表格设置边框线颜色和样式方法

    首先,右键点击表格,在弹出的右键菜单中选择"边框和底纹",在"线形"中我们可以设置边框线的样式.然后在"颜色"中选择自己需求的颜色确定即可. ...