使用CSS3生成简单的box影子

aSuncat

2012-04-28

下面的例子展示了你可生成一个简单的box的影子，使用css3中的box-shadow

<!DOCTYPE html>
<html>
<head>
    <title>Creating a simple box shadow on a container using CSS3</title>
    <style type="text/css">
        #box1 {
            -webkit-box-shadow: 10px 10px red;
            -moz-box-shadow: 10px 10px green;
            box-shadow: 10px 10px blue;
        }
 
        #box2 {
            -webkit-box-shadow: 10px 10px 15px red;
            -moz-box-shadow: 10px 10px 15px green;
            box-shadow: 10px 10px 15px blue;
        }
 
        fieldset {
            background-color: #eee;
            border: 2px dashed black;
            width: 90%;
        }
 
        legend {
            font-size: 1.5em;
            font-weight: bold;
        }
    </style>
</head>
<body>
 
    <fieldset id="box1">
        <legend>box-shadow <em>without</em> blur</legend>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin purus eros, sollicitudin sit amet hendrerit ac, semper porta libero. Donec porta leo vitae felis suscipit lobortis. Morbi id erat magna, nec tincidunt nulla. Vestibulum mattis nulla sit amet elit mollis vitae commodo lectus lobortis. Praesent rhoncus elementum nisi quis faucibus. Phasellus nibh nulla, consequat vitae hendrerit sed, rutrum sagittis purus. Fusce orci mauris, aliquam in bibendum vitae, gravida id magna. Nulla consectetur imperdiet dolor ultricies ultrices. Morbi magna nisl, ultrices vitae iaculis quis, sodales eget sem. Cras magna neque, convallis quis cursus non, placerat quis purus. Fusce quis purus mauris. Nullam sodales nulla id nunc tincidunt interdum. Donec non urna ut nisi ornare condimentum vitae et turpis. Mauris varius urna ac nisi ullamcorper a cursus dui dapibus. Duis convallis auctor tristique. In consequat metus non libero scelerisque faucibus.</p>
    </fieldset>
 
    <br/>
 
    <fieldset id="box2">
        <legend>box-shadow <em>with</em> blur</legend>
        <p>Donec semper risus in justo tempor id laoreet ligula faucibus. Sed non sem odio, eu congue dui. Sed at metus ligula. Nam sit amet orci id felis viverra convallis vitae sit amet lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam a tellus nisl. Etiam sed felis est. Curabitur aliquet, mi ac fringilla dignissim, metus mauris convallis velit, ut faucibus orci sapien ac nulla. Nulla feugiat auctor mi, at bibendum ligula adipiscing a. Fusce sed lorem et metus faucibus semper a quis turpis. Aenean sapien justo, tincidunt ut dapibus eu, blandit id libero. Nulla justo tellus, venenatis sit amet porttitor nec, faucibus nec velit. Etiam elit nibh, gravida et volutpat at, tincidunt eu ipsum. Quisque mollis aliquet neque facilisis condimentum. Mauris sit amet erat a enim rutrum pharetra. Mauris volutpat nunc quis purus adipiscing hendrerit. Phasellus interdum consectetur massa, at faucibus justo viverra ut.</p>
    </fieldset>
 
</body>
</html>

源码下载：

使用CSS3生成简单的box影子.zip

box box-shadow css