html5阴影效果怎么做

html-css022

html5阴影效果怎么做,第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>

效果如图:

如果想在保留边框的情况下去掉边框上的阴影,设置边框为实线即可,button边框默认是双线,就会出现一个很难看的立体效果,我就查了查api,发现边框分着双线和实线,如果边框有双线,那这和出现的场景一样啊,我就再次设置成实线了发现。。。。。。。那个恶心的虚影没了,而且保留了边框。