这里讲下如何利用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. 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. 一款纯css3实现的颜色渐变按钮

    之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览  ...

  4. 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...

  5. css3背景颜色渐变属性

    https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...

  6. css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

  7. CSS3颜色渐变模式

       1.线性渐变:linear-gradient 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <si ...

  8. CSS3 颜色渐变、阴影、渐变的阴影

    css阴影: 外阴影:box-shadow:X Y Npx #color; 内阴影:box-shadow:inset X Y Npx #color; 文字阴影:text-shadow:X Y Npx ...

  9. CAGradientLayer颜色渐变器

    使用CAGradientLayer可以实现颜色的渐变, 我们先看下头文件 @interface CAGradientLayer : CALayer @property(nullable, copy) ...

随机推荐

  1. Zookeeper的临时节点和永久节点

    Zookeeper中节点分为两种:临时节点和永久节点. 临时节点有一个节点: 当创建临时节点的程序停掉之后,这个临时节点就会消失. 更直观的,如下   Persistent是临时节点. Persist ...

  2. Android 串口驱动和应用测试

    这篇博客主要是通过一个简单的例子来了解Android的串口驱动和应用,为方便后续对Android串口服务和USB虚拟串口服务的了解.这个例子中,参考了<Linux Device Drivers& ...

  3. html5——css选择器

    复习 div>p: 子代 div+p:div后面相邻的第一个p div~p: div后面所有的兄弟p 属性选择器 标志:[]:区别于id选择器:#,区别于类名选择器:. 特殊符号:^:开头    ...

  4. json 新用

    如果使用struts2的action,可以省去属性赋值的工夫. 但是假如你没有使用struts2,而且使用的是ajax请求,通过json来传递参数.那我下面所说的对你可能是一个很好的解脱,从此告别re ...

  5. SQLServer 异常捕获,回滚,再抛出

    一个存储过程中多个更新操作,后面的更新操作出现异常,如果不手动回滚前面修改的数据是不会自动撤销的! BEGIN TRY BEGIN TRAN -- ..... COMMIT TRAN END TRY ...

  6. xcode构建webdriverAgent时报错Messaging unqualified id的解决办法

    在使用xcode构建webdriverAgent时,提示build failed,报错信息为:semantic issue:Messaging unqualified id,可以参考以下解决方案 xc ...

  7. matplotlib命令与格式:标题(title),标注(annotate),文字说明(text)

      1.title设置图像标题 (1)title常用参数 fontsize设置字体大小,默认12,可选参数 ['xx-small', 'x-small', 'small', 'medium', 'la ...

  8. Django - 一对多创建

    1.新创建一个app python manage.py startapp app01 2.在django的setting.py中,填加新增的app名称 3.在app01的models.py中,添加代码 ...

  9. Excel 导入 分批导入

    tm.begin(); sm.begin(); try { result = excel.readE(headKeyV,path); for (int index = 1; index < re ...

  10. (JS,JAVA,MySql)去除小数后多余的0

    分别通过JS,JAVA和MySql实现去除小数后多余的0 1. JS方法 /** *去除小数点后多余的0 */ function cutZero(old) { //拷贝一份 返回去掉零的新串 old ...