网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
在网页设计过程中,我们经常需要在网页中设置一些特殊的效果,让设计出来的网页显得更加美观,本篇文章将要给大家介绍如何通过css给边框设置阴影效果,css阴影效果可能会让设计出来框更具有立体感,话不多说,让我们来具体看一看css边框阴影效果的设置方法。
我们在设置边框阴影时,必不可少的一个属性是box-shadow,box-shadow可以向框添加一个或多个阴影。下面我们来看一下具体的例子。
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:30px;background-color:#E9E9E9;}
div.polaroid{width:294px;padding:10px 10px 20px 10px;border:1px solid #BFBFBF;background-color:green;
/* 设置阴影效果 */
box-shadow:5px 5px 6px #090;}
div.rotate_left
{float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
transform:rotate(7deg);}
}
</style>
</head>
<body>
<div class="polaroid rotate_left">
<img src="/i/ballade_dream.jpg" alt="郁金香" width="284" height="213" />
<p class="caption">鲜花郁金香,花名:Ballade Dream。</p>
</div>
</body>
</html>
在看了各个属性值的含义后,我们可以知道上述例子中设置的阴影效果,box-shadow属性后面的四个属性值分别为:h-shadow、v-shadow、blur、color。