关键词：
这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片；本想直接在这个页面下嵌html的,,试了后发现有些css样式貌似不给用就只能放图片了...=_=)：
首先是box-shados语法,用于向框添加一个或多个阴影：
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
| h-shadow | 必须。水平阴影的位置 |
| v-shadow | 必须。垂直阴影的位置 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影尺寸 |
| color | 可选。阴影的颜色 |
| insert | 可选。将外部阴影改为内部阴影 |
下面是为按钮设置的位置为0px,1px 模糊距离为5px，颜色为深灰色的css样式
1 <style> 2 .show 3 { 4 box-shadow: 0px 1px 5px #4a4a4a; 5 } 6 </style>
然后是transition,通过四个属性来营造过渡效果：
transition: property duration timing-function delay;
| 值 | 描述 |
| transition-property | 规定设置过渡效果的css属性的名称 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒 |
| transition-timing-function | 规定速度效果的速度曲线 |
| transition-delay | 规定过渡效果何时开始 |
下面是过渡时长为0.3s，过渡函数为ease-out的样式
1 <style> 2 .show 3 { 4 transition: .3s ease-out; 5 } 6 </style>
最后这是最开始时那个按钮效果的全部实现代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style> 8 9 .show 10 { 11 border:none; 12 display:inline-block; /* 行内块 */ 13 padding:6px 16px; 14 color:white; 15 background-color: #F88E8B; 16 text-align: center; 17 vertical-align: middle; 18 margin-left:50px; 19 transition: .3s ease-out; 20 cursor: pointer; /* 获得焦点时改变指针样式 */ 21 box-shadow: 0px 1px 5px #4a4a4a; 22 } 23 p.show a:link,p.show a:visited 24 { 25 text-decoration: none; 26 color:white; 27 } 28 p.show:hover 29 { 30 text-decoration: none; 31 color:white; 32 background-color: #F45551; 33 } 34 35 </style> 36 37 </head> 38 <body> 39 40 <div> 41 <p class="show"> 42 <a href="#">点击这里</a> 43 </p> 44 </div> 45 46 </body> 47 </html>
css3实现渐变
chrome，苹果浏览器：—webkit-firebox浏览器：-moz-Opera浏览器：-o-渐变分为：线性渐变（LinearGradients）向下/向上/向左/向右/对角方向径向渐变（RadialGradients） 由中心定义 从上到下的线性渐变如何创建一个带有彩虹颜色和文... 查看详情
div背景颜色怎样渐变css实现div层背景颜色渐变代码
借助background-position实现渐变过渡background-image虽然不支持CSS3 transition过渡，但是background-position支持啊，于是，通过控制背景位置，我们是可以实现渐变过渡效果的。实现效果如下（鼠标hover）：借助background-color实现渐变过渡b... 查看详情
第七十九，css3背景渐变效果
...inear-gradient背景颜色的渐变功能CSS3提供了linear-gradient属性实现背景颜色的渐变功能。在以前，这种效果必须采用图片才能实现的。首先，我们先看一下它的样式表，如下： 查看详情
css3文字特效
...字特效的地方还是很少，最多的就是给文字添加text-shadow阴影效果。今天在浏览网页的时候发现了一组文字特效，虽然很简单但是你让我来写我肯定是写不出来，所以研究了一会，写了几个小样式。一、文字渐变主要样式有linear-... 查看详情
css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变
...色之间显示平稳的过渡的效果。这篇文章主要介绍下css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变的方法，以便大家学习参考！ 1、css背景颜色渐变代码：<style>.content_bg{ width:600px;max-width:100%;margin:auto;height:150px;line... 查看详情
css3中如何实现渐变效果
CSS3里面的线性渐变：linear-gradient1、语法2、参数第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：第一个参数省略时，默认为“180deg”，等同于“to bottom”。第二个和第三个参数，表示颜色的起始点和... 查看详情
带有阴影效果的 HTML5 文本
...8-02-1213:58:53【问题描述】：我一直在做前端开发，但无法实现带有阴影效果的文本。前端由HTML5、CSS3、bootstrap和AngularJS编码，所以在设计中，在文本文件处有阴影效果，就像Photoshop中的阴影效果一样。请告诉我如何实现这种阴影... 查看详情
css3（边框，背景，字体，颜色之rgba与透明度opcity，图片和渐变颜色）
...20%；border-radius:5px4px3px2px;左上，右上，右下，左下。盒子阴影：box-shadow：box-shadow:x轴偏移量y轴偏移量阴影模糊半径(阴影颜色的模糊程度) 阴影扩展半径阴影颜色 投影方式注意：inset是指阴影在盒子内部，默认在外部，ins... 查看详情
第161天：css3实现兼容性的渐变背景(gradient)效果
CSS实现兼容性的渐变背景(gradient)效果一、有点俗态的开场白在对CSS3支持日趋完善的今天，实现兼容性的渐变背景效果已经完全成为可能，本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目前不支持Opera浏览... 查看详情
纯css3实现按钮的hover和active时颜色的明暗变化效果
效果：在任意HTML标签上增加样式类f-color-control就可以为此元素增加hover和avtive时颜色的变化;代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.btn{widt 查看详情
浅探css3渐变
...网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要网络请求，既耗带宽又耗时间，下面我将介绍用css3的渐变来改善这一... 查看详情
浅探css3渐变
...网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要网络请求，既耗带宽又耗时间，下面我将介绍用css3的渐变来改善这一... 查看详情
css3--渐变
...定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用CSS3渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览... 查看详情
第22章css渐变效果
...放射性）渐变。一．线性渐变CSS3提供了linear-gradient属性实现背景颜色的渐变功能。在以前，这种效果必须采用图片才能实现的。首先，我们看一下它的样式表，如下：linear-gradient(方位,起始色,末尾色)方位：可选参数，渐变的方... 查看详情
关于ie兼容css3圆角与阴影与渐变的渲染
...，通过使用css的behavior行为调用这个文件，然后使IE也能实现一些常见的css3效果，例如圆角、阴影、渐变、多图片背景的渲染等等。下面就是一个小例子：<!DOCTYPEhtm 查看详情
css左边竖条实现方法
...的渐变简单而言分为线性渐变和径向渐变，使用线性渐变实现：这个用的比较少，outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。这个方法算是下下之选。这个方法由小火柴的蓝色理... 查看详情
css3渐变
...定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用CSS3渐变，你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。CSS3定义了... 查看详情
Swift - UI 按钮阴影渐变
...子视图并使用高斯模糊滤镜来绘制它。现在我被困在如何实现这一点，并没有 查看详情