在前面的例子里面， 用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
分享到：
相关推荐
总的来说，"53种CSS3阴影效果box-shadows.css"是一个实用的工具，它简化了添加阴影到网页元素的过程，帮助开发者快速实现专业级别的设计效果，同时鼓励他们探索和实验更多的CSS3阴影可能性。通过深入理解`box-shadow...
在CSS3中，阴影效果包括内阴影(`inset`)和外阴影(`outset`)，可以应用于各种元素，如`box-shadow`属性可以设置元素的盒子阴影，而`text-shadow`则可以添加文字阴影，增强视觉效果。圆角边框(`border-radius`)则是CSS...
总之，CSS3的立体盒子效果是通过盒阴影、变换和圆角等特性实现的。学习并掌握这些技术，不仅可以提升网页的视觉吸引力，还能在设计上带来更多的创新可能性。通过实践和不断尝试，你将成为一个更出色的Web设计师。
CSS3阴影属性是CSS3新增的一个重要特性，它极大地丰富了网页设计的视觉表现力，使得文本和元素的外观更加立体和生动。阴影属性主要包括两个方面：`text-shadow`和`box-shadow`。 1. `text-shadow`属性： `text-...
在本文中，我们将深入探讨如何使用CSS3来实现IE浏览器的圆角和阴影样式，以及如何通过jQuery来增强这些效果。 首先，让我们了解一下CSS3中的圆角边框。在CSS2时代，如果我们想要创建圆角效果，通常需要使用大量的...
例如，为一个表格添加一个简单的阴影效果，我们可以这样写： ```css table { box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3); } ``` 这段代码将添加一个向右下角偏移2像素，模糊半径为5像素的灰色阴影。`rgba(0, ...
总之，CSS3 for Photoshop CC是网页设计流程中的一个强大工具，它连接了设计与开发，使得创意可以直接转化为实际的网页效果。对于设计师而言，理解并熟练运用CSS3和Photoshop的这一特性，无疑能提升工作效率，实现...
本项目“css3带阴影弹出窗口”利用CSS3的特性来创建一个具有阴影效果的弹出窗口，这种效果类似于流行的Lightbox插件，通常用于展示图片、视频或其他内容，为用户提供沉浸式的浏览体验。 在描述中提到，这个弹出窗口...
一、CSS3圆角 CSS3的圆角属性允许开发者轻松地创建带有圆角边框的元素，无需使用图片或复杂的背景技巧。主要有`border-radius`属性，通过设定不同的数值，可以实现不同角度的圆角效果。例如： ```css .box { border...
例如，创建一个向右下角偏移，模糊半径为5px，颜色为灰色的外阴影可以这样写： ```css box-shadow: 5px 5px 5px gray; ``` 而`text-shadow`的语法与`box-shadow`类似，但不包含`spread-radius`，只适用于文本元素：...
【标题】"3D阴影效果css3按钮代码.zip"是一个包含使用CSS3技术实现的3D阴影效果按钮的代码资源。这个压缩包主要是为了展示如何利用CSS3的特性来创建具有立体感和阴影效果的交互式按钮，为网页设计增添视觉吸引力。 ...
2. `box-shadow`：此属性可以添加一个或多个阴影到元素，而在CSS3中，可以使用`inset`关键字和`x-offset`、`y-offset`、`blur-radius`和`spread-radius`值来创建内阴影和3D阴影效果。 3. `perspective`：设置3D空间...
本教程将详细介绍如何使用CSS3来实现一个具有底部阴影的按钮，并提供相关的代码下载。 首先，我们来理解CSS3阴影效果的基础。CSS3提供了`box-shadow`属性，用于为元素添加阴影。这个属性接受几个参数，例如： ```...
`box-shadow`属性用于向盒子添加阴影效果，支持添加一个或多个阴影。其基本语法如下： ```css /* 添加外阴影 */ box-shadow: 10px 10px 5px #888888; /* 添加内阴影 */ box-shadow: inset 10px 10px 5px #888888; ...
本文将详细探讨如何使IE支持CSS3的部分功能，包括阴影背景效果、圆角效果和渐变背景效果，并介绍一个名为PIE的工具。 首先，让我们关注阴影效果。CSS3中的box-shadow属性允许开发者为元素添加阴影，提升其立体感。...
总之，"CSS3鼠标悬停聚光灯阴影效果.rar"是一个关于使用CSS3和jQuery创建动态网页特效的资源包。通过学习和实践这份代码，开发者不仅可以掌握CSS3的box-shadow属性和:hover伪类，还能了解如何结合jQuery来增强网页的...
在这个示例中，我们创建了一个带有圆角的 div 元素，然后使用 `inset` 值的 `box-shadow` 来创建内嵌效果，`text-indent` 则使文字向右移动，形成内嵌的视觉效果。 在实际项目中，阴影字和内嵌入字可以用于各种场景...
例如，以下代码将给一个元素添加一个向右下方偏移5像素、模糊半径为3像素、颜色为灰色的外阴影： ```css div { box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5); } ``` 若要添加内阴影，只需在末尾加上'inset'关键字...
4. **多阴影应用**：一个元素可以同时拥有多个阴影，通过逗号分隔不同的`box-shadow`值，创建更复杂的立体效果。例如： ```css box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -1px -1px 5px rgba(0, 0, 0, 0.3); ...
2. **阴影效果（box-shadow）**: 包括内阴影(inset)和外阴影(outset)，CSS3 Pie使开发者能够在IE6-9中创建出阴影效果，增加界面的立体感和深度。 3. **渐变背景（linear-gradient, radial-gradient）**: CSS3 Pie...