在前面的例子里面， 用CSS3创建一个简单盒子的阴影的透明度。下面的例子，展示给你在box-shadow样式里面用CSS3和指定inset的参数，在在box-shadow使用rgba()。
<!DOCTYPE html>
<html>
<head>
<title>Setting the box shadow alpha on a container using CSS3</title>
<style type="text/css">
#box1 {
-webkit-box-shadow: 10px 10px rgba(255, 0, 0, 0.3);
-moz-box-shadow: 10px 10px rgba(0, 255, 0, 0.3);
box-shadow: 10px 10px rgba(0, 0, 255, 0.3);
}
#box2 {
-webkit-box-shadow: 10px 10px 15px rgba(255, 0, 0, 0.3);
-moz-box-shadow: 10px 10px 15px rgba(0, 255, 0, 0.3);
box-shadow: 10px 10px 15px rgba(0, 0, 255, 0.3);
}
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>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>
源码下载：
分享到：
相关推荐
总的来说，"53种CSS3阴影效果box-shadows.css"是一个实用的工具，它简化了添加阴影到网页元素的过程，帮助开发者快速实现专业级别的设计效果，同时鼓励他们探索和实验更多的CSS3阴影可能性。通过深入理解`box-shadow...
**CSS3代码在线生成生成器 v1.0** 是一个基于网页的应用程序，它专为开发者和设计师设计，旨在简化CSS3样式的创建过程。这个工具允许用户通过设定一系列基本参数来快速生成所需的CSS3样式，如阴影效果、边框圆角等。...
在CSS3中，立体盒子效果是通过引入新的样式属性和技术实现的，这使得网页元素能够展现出更为丰富的视觉效果。本篇学习笔记将深入探讨如何利用CSS3创建具有立体感的盒子，供所有对Web设计感兴趣的人共享和学习。 ...
CSS3阴影属性是CSS3新增的一个重要特性，它极大地丰富了网页设计的视觉表现力，使得文本和元素的外观更加立体和生动。阴影属性主要包括两个方面：`text-shadow`和`box-shadow`。 1. `text-shadow`属性： `text-...
例如，可以创建一个带有自定义阴影的表格： ```css table { position: relative; } table::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 2px 2px...
本项目“css3带阴影弹出窗口”利用CSS3的特性来创建一个具有阴影效果的弹出窗口，这种效果类似于流行的Lightbox插件，通常用于展示图片、视频或其他内容，为用户提供沉浸式的浏览体验。 在描述中提到，这个弹出窗口...
总的来说，CSS3的圆角和阴影效果极大地提升了网页设计的美观度，而jQuery等JavaScript库则帮助我们在不支持这些新特性的老版本IE浏览器上实现了兼容。通过合理的代码编写和适当的插件应用，我们可以确保即使在较旧的...
总之，CSS3 for Photoshop CC是网页设计流程中的一个强大工具，它连接了设计与开发，使得创意可以直接转化为实际的网页效果。对于设计师而言，理解并熟练运用CSS3和Photoshop的这一特性，无疑能提升工作效率，实现...
CSS3的圆角属性允许开发者轻松地创建带有圆角边框的元素，无需使用图片或复杂的背景技巧。主要有`border-radius`属性，通过设定不同的数值，可以实现不同角度的圆角效果。例如： ```css .box { border-radius: 10px...
本教程将详细介绍如何使用CSS3来实现一个具有底部阴影的按钮，并提供相关的代码下载。 首先，我们来理解CSS3阴影效果的基础。CSS3提供了`box-shadow`属性，用于为元素添加阴影。这个属性接受几个参数，例如： ```...
在这个示例中，我们创建了一个带有圆角的 div 元素，然后使用 `inset` 值的 `box-shadow` 来创建内嵌效果，`text-indent` 则使文字向右移动，形成内嵌的视觉效果。 在实际项目中，阴影字和内嵌入字可以用于各种场景...
总之，"CSS3鼠标悬停聚光灯阴影效果.rar"是一个关于使用CSS3和jQuery创建动态网页特效的资源包。通过学习和实践这份代码，开发者不仅可以掌握CSS3的box-shadow属性和:hover伪类，还能了解如何结合jQuery来增强网页的...
这将为`h1`标题添加一个2像素向右、2像素向下偏移的黑色阴影，模糊半径为4像素，透明度为50%。 2. **边框阴影（box-shadow）** `box-shadow`属性则用于元素的边框外添加阴影。它可以接受多个值，包括内偏移、外...
例如，创建一个向右下角偏移，模糊半径为5px，颜色为灰色的外阴影可以这样写： ```css box-shadow: 5px 5px 5px gray; ``` 而`text-shadow`的语法与`box-shadow`类似，但不包含`spread-radius`，只适用于文本元素：...
CSS3利用边框和透明度可以实现纯CSS绘制图形。比如，通过设置不同边框颜色和宽度，然后隐藏不需要的部分，可以创建出三角形；而使用`border-radius`设置100%的半径，则可以得到一个完美的圆形。这种技术无需依赖额外...
【标题】"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的新特性，如边框半径、渐变、阴影、伪类等，为用户提供美观且功能丰富的搜索体验。在这个主题下，我们将深入探讨7组不同的CSS3搜索框设计方法，它们展示了...
CSS3 Filter是CSS3中一个强大的特性，它允许开发者对元素进行图像处理，如模糊、饱和度调整、对比度增强、色调变化等。这个技术在网页设计中被广泛应用，为网页元素添加各种视觉效果，无需借助JavaScript或者第三方...
总之，纯CSS设计3D按钮是一个结合了创意和技术的挑战，通过巧妙运用CSS属性和技巧，可以创造出既美观又实用的交互元素。不过要注意，虽然CSS提供了强大的样式能力，但在设计时也需考虑性能和兼容性，以确保按钮在...