应用CSS3生成一个inset盒子阴影
日期：2014-05-17 浏览次数：20746 次
使用CSS3生成一个inset盒子阴影
在前面的例子里面， 用CSS3创建一个简单盒子的阴影。下面的例子，展示给你在box-shadow样式里面用CSS3和指定inset的参数。
<!DOCTYPE html>
<html>
<head>
<title>Creating an inset box shadow on a container using CSS3</title>
<style type="text/css">
#box1 {
-webkit-box-shadow: inset 10px 10px #f00;
-moz-box-shadow: inset 10px 10px #0f0;
box-shadow: inset 10px 10px #00f;
}
#box2 {
-webkit-box-shadow: inset 10px 10px 15px #f00;
-moz-box-shadow: inset 10px 10px 15px #0f0;
box-shadow: inset 10px 10px 15px #00f;
}
fieldset {
background-color: #eee;
border: 2px dashed #000;
width: 90%;
}
legend {
font-size: 1.5em;
font-weight: bold;
}
</style>
</head>
<body>
<fieldset id="box1">
<legend>inset 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>
<fieldset id="box2">
<legend>inset 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生成一个inset盒子阴影.zip
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
