Question

html5阴影效果怎么做

Answer 1

边框阴影（box-shadow）的基本语法：

box-shadow：color  h-shadow  v-shadow blur spread  inset；

color：阴影颜色 ------------ 可选

h-shadow ：水平偏移量 ----必选          

v-shadow：垂直偏移量-----必选

blur：模糊距离 -------------可选

spread：阴影尺寸---------- 可选

inset：内阴影 --------------可选

例子：

css部分：

.div1{

width:200px;

height:200px;

margin:20px auto;

line-height: 200px;

text-align: center;

background: cadetblue;

border:2px solid darkslategray;

box-shadow: darkgrey 10px 10px 30px 5px ;//边框阴影

}

html部分：

<div class="div1">边框阴影示例</div>

效果如图：

Answer 2

box-shadow: h-shadow v-shadow blur spread color inset;

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

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

blur 可选。模糊距离。
spread 可选。阴影的尺寸。

color 可选。阴影的颜色。请参阅 CSS 颜色值。

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

Answer 3

box-shadow:0 0 12px rgba(0,0,0,0.4);