这里讲下如何利用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样式

 <style>

         .show

         {

             box-shadow: 0px 1px 5px #4a4a4a;

         }

 </style>

然后是transition,通过四个属性来营造过渡效果：

transition: property duration timing-function delay;
值 描述
transition-property 规定设置过渡效果的css属性的名称
transition-duration 规定完成过渡效果需要多少秒或毫秒
transition-timing-function 规定速度效果的速度曲线
transition-delay 规定过渡效果何时开始 
 下面是过渡时长为0.3s，过渡函数为ease-out的样式
 <style>

         .show

         {

             transition: .3s ease-out;

         }

 </style>

最后这是最开始时那个按钮效果的全部实现代码：
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         .show

         {

             border:none;

             display:inline-block; /* 行内块 */

             padding:6px 16px;

             color:white;

             background-color: #F88E8B;

             text-align: center;

             vertical-align: middle;

             margin-left:50px;

             transition: .3s ease-out;

             cursor: pointer; /* 获得焦点时改变指针样式 */

             box-shadow: 0px 1px 5px #4a4a4a;

         }

         p.show a:link,p.show a:visited

         {

             text-decoration: none;

             color:white;

         }

         p.show:hover

         {

             text-decoration: none;

             color:white;

             background-color: #F45551;

         }

     </style>

 </head>

 <body>

 <div>

     <p class="show">

         <a href="#">点击这里</a>

     </p>

 </div>

 </body>

 </html>


 


 
												


											
用CSS3实现带有阴影效果和颜色渐变的按钮的更多相关文章
	

    
								
  1. css3的背景颜色渐变@线性渐变
		
    背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...
    
		
    2. 
						
  2. css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+
		
    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...
    
		
    3. 
						
  3. 一款纯css3实现的颜色渐变按钮
		
    之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览  ...
    
		
    4. 
						
  4. 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
		
    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...
    
		
    5. 
						
  5. css3背景颜色渐变属性
		
    https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...
    
		
    6. 
						
  6. css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变
		
    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码:  ...
    
		
    7. 
						
  7. CSS3颜色渐变模式
		
       1.线性渐变:linear-gradient 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <si ...
    
		
    8. 
						
  8. CSS3 颜色渐变、阴影、渐变的阴影
		
    css阴影: 外阴影:box-shadow:X Y Npx #color; 内阴影:box-shadow:inset X Y Npx #color; 文字阴影:text-shadow:X Y Npx  ...
    
		
    9. 
						
  9. CAGradientLayer颜色渐变器
		
    使用CAGradientLayer可以实现颜色的渐变, 我们先看下头文件 @interface CAGradientLayer : CALayer @property(nullable, copy)  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. tomcat解决 java.lang.IllegalArgumentException: Request header is too large
			
    tomcat运行项目时,有一个请求过去后,后台报这样的错java.lang.IllegalArgumentException: Request header is too large 原因:请求头超过 ...
    
			
    2. 
						
  2. [转]在 Linux 下使用 RAID
			
    转自:http://www.linuxidc.com/Linux/2015-08/122191.htm RAID 的意思是廉价磁盘冗余阵列(Redundant Array of Inexpensive ...
    
			
    3. 
						
  3. SublimeText学习(二)-基本操作
			
    1.查看已安装的插件 看到已经安装的插件,看到了在上一篇中安装的Emmet 2.设置主题与字体 方法一: 方法二: 工具栏中 [Preference-浏览程序包]找到[Default文件夹]-用Sub ...
    
			
    4. 
						
  4. Objective-C——关联对象
			
    动态语言 OC是一种动态语言,它的方法,对象的类型都是到运行的时候才能够确定的.所以这就使得OC存在了关联对象这一强大的机制. 关联对象 所谓关联对象,其实就是我们在运行时对一个已存在的对象上面绑定一 ...
    
			
    5. 
						
  5. ansj --词性说明
			
    背景 Ansj 是一个开源的 Java 中文分词工具,基于中科院的 ICTCLAS 中文分词算法,比其他常用的开源分词工具(如mmseg4j)的分词准确率更高.工具支持词性标注,所以就可以依据词性进行 ...
    
			
    6. 
						
  6. docloud后台管理项目(前端篇)
			
    以下内容与主题无关,如果不想看可以直接忽视 !--忽视开始--! 给大家推荐一款强大的编辑器,那就是集响应快.体验好.逼格高.功能丰富为一体的sublime text 3.它除了以上特点,还有一个最重 ...
    
			
    7. 
						
  7. HDU_1027_Ignatius and the Princess II_全排列
			
    Ignatius and the Princess II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ( ...
    
			
    8. 
						
  8. day13-迭代器、三元表达式、列表推导式、字典生成式、生成器与递归
			
    目录 迭代器 可迭代对象 迭代器对象 for循环原理 三元表达式(三目表达式) 列表推导式 字典生成式 zip()方法 生成器 生成器表达式 递归 递归的两个阶段 迭代器 迭代器即迭代的工具,迭代是一 ...
    
			
    9. 
						
  9. 如何给PDF文件添加水印？
			
    在数字化媒体高速发展的今天,信息传播的速度也越来越快,人们常常会在网络上一些有趣的图片,文件,段子诸如此类的东西,人们往往会去下载或转发,但是因为一些因素,导致版权之经常上演,水印呢,其实就给你自己的 ...
    
			
    10. 
						
  10. VMware Workstation Pro 15 for Windows下载与安装
			
    VMware Workstation Pro 15 for Windows下载与安装 一.下载 下载地址:https://my.vmware.com/cn/web/vmware/details?dow ...
    
			
    11.