Linux 拨号vps windows公众号手机端

html怎么设置div阴影

lewis 6年前 (2019-03-15) 阅读数 11 #程序编程
文章标签 divhtml

html设置div阴影的方法:使用css样式中“box-shadow”属性为div添加阴影效果,只需要在html中添加“box-shadow: 0px 0px 100px 10PX black;”样式代码设置阴影效果即可。

示例代码:

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<title>阴影效果</title>

<styletype="text/css">

div{

position:absolute;

left:300px;

top:300px;

width:300px;

height:300px;

box-shadow:0px0px100px10PXblack;

border:1pxsolidblack;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

效果如下:

box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

语法:

box-shadow:h-shadowv-shadowblurspreadcolorinset;

属性值:

  • h-shadow 必需。水平阴影的位置。允许负值。

  • v-shadow 必需。垂直阴影的位置。允许负值。

  • blur 可选。模糊距离。

  • spread 可选。阴影的尺寸。

  • color 可选。阴影的颜色。

  • inset 可选。将外部阴影 (outset) 改为内部阴影。

版权声明

本文仅代表作者观点,不代表米安网络立场。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门