在前面的例子里面， 用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
分享到：
相关推荐
今天比较忙，没能好好看新东西，就记录一个常用的CSS3属性吧：box-shadow，表示阴影，如果设置了border-radius圆角，则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法： Formal ...
CSS3 –添加阴影（盒子阴影的使用） CSS3 – 给div或者文字添加阴影（盒子阴影、文本阴影的使用） CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影需要IE10及其更新版本。...
前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法，这几次继续整理了有关于CSS3的text-shadow的使用方法,需要了解的朋友可以详细参考下
PostCSS插入 一个插件，可以将CSS属性从一个类插入另一个类，例如Sass的@extend更好！ 好吧，如果您在了解@extend之前就已经使用过Sass，那么这个概念非常简单：您可以采用一个类的属性，然后以一种简单的方式将它们...
border是一个综合性写法，它设置的是四个边框的宽度、样式和颜色，不能对某一个边框单独设置。它的格式： border: border-width border-style border-color; 示例： .bk01 {border:3px solid #FF0000;} 单边...
box-shadow向框添加一个或多个阴影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。语法：代码如下: CSS Code复制内容到剪贴板 box-shadow: h-shadow v-shadow blur spread color...
在 http://www.cnblogs.com/strick/p/4843595.html 有描述
独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。 使用步骤： 1.创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <...
本文讲诉了CSS3阴影 box-shadow的使用和技巧，具体如下： text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及，这一特殊效果使用越来越普遍。 基本语法是{box-shadow:...
本文介绍了Css3新特性应用之视觉效果，具体有单侧阴影、不规则投影、染色体效果、毛玻璃效果、折角效果，具体实现如下： 一、单侧阴影 1、box-shadow属性的应用，格式：h-shadow v-shadow blur spread color inset...
box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值阴影类型可以省略，默认为外投影，当它的值为inset时，为内阴影效果。X水平偏移和Y垂直偏移可取正负值，当X为负值是...
样式表css： jquery-ui-custom.css ui.jqgrid.css 图片png： ui-bg_flat_0_aaaaaa_40x100.png ui-bg_flat_55_fbec88_40x100.png ui-bg_glass_75_d0e5f5_1x400.png ui-bg_glass_85_dfeffc_1x400.png ui-bg_glass_95_...
随着html5和CSS3的普及，这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} "混合模式"：Photoshop提供了各式各样的混合模式，但是CSS3阴影只支持...
此效果没有用图片和任何JS!...Opera浏览器和Firefox浏览器对于阴影使用的是box-shadow inset, 而Webkit浏览器(如谷歌浏览器)使用的是background:-webkit-gradient. 谷歌下个版本将会很好的支持 box-shadow inset
1分都不行了，其实这个我想0积分分享出去的，也不是什么很牛的代码
属性说明（顺序依次对应）： 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色 内阴影：box-shadow: X轴 Y轴 Rpx color inset; 默认是外阴影 内阴影：inset 可以设置...
一、边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h-shadow：水平阴影 v-shadow：垂直阴影 blur：模糊距离 spread：阴影的尺寸 color：...//第一个参数：水平半径 第二个参数:
修改asp。php等等网站的代码。可以编写asp。php等等网站
比如：box-shadow，每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用，都要查阅资料才能实现对应的效果,现在总结一下,box-shadow的使用方法以及box-shadow内阴影的使用，方便以后查看。 一、box-shadow语法 ...
box-shadow:inset 0 0 0 2px hsla(' H ',100%,70%,1);background:hsla(' H ',100%,70%,1);"></div>'); $('.tail').each(function() { var div = $(this); setTimeout(function() {$(div).remove();},...