用CSS3实现带有阴影效果和颜色渐变的按钮
这里讲下如何利用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实现带有阴影效果和颜色渐变的按钮的更多相关文章
- css3的背景颜色渐变@线性渐变
背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...
- 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 ...
- 一款纯css3实现的颜色渐变按钮
之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览 ...
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...
- css3背景颜色渐变属性
https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...
- css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变
css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...
- CSS3颜色渐变模式
1.线性渐变:linear-gradient 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <si ...
- CSS3 颜色渐变、阴影、渐变的阴影
css阴影: 外阴影:box-shadow:X Y Npx #color; 内阴影:box-shadow:inset X Y Npx #color; 文字阴影:text-shadow:X Y Npx ...
- CAGradientLayer颜色渐变器
使用CAGradientLayer可以实现颜色的渐变, 我们先看下头文件 @interface CAGradientLayer : CALayer @property(nullable, copy) ...
随机推荐
- ORACLE SEQUENCE用法(转)
ORACLE SEQUENCE用法 在oracle中sequence就是序号,每次取的时候它会自动增加.sequence与表没有关系. 1.Create Sequence 首先要有CREATE ...
- java_基础知识_字符串练习题_计算两个字符串的最长公共字串长度
package tek; Java算法——求出两个字符串的最长公共字符串 /** * @Title: 问题:有两个字符串str1和str2,求出两个字符串中最长公共字符串. * @author 匹夫( ...
- SSH Secure Shell Client连接centos6.5时中文字乱码处理
在学习Linux的过程中,最先碰到的是通过SSH终端连接时发现有乱码出现,使用这篇文章先从这里说起. 在 ssh , telnet 终端中文显示乱码解决办法#vim /etc/sysconfig/i1 ...
- Unity 引擎UGUI之自定义树形菜单(TreeView)
先上几张效果图: 如果你需要的也是这种效果,那你就来对地方了! 目前,我们这个树形菜单展现出来的功能如下: 1.可以动态配置数据源: 2.点击每个元素的上下文菜单按钮(也就是图中的三 ...
- js输出非字符串,非null值
console.log(!"");//非空(true) console.log(!);//非0(true) console.log(!" ");//非空格(fa ...
- day07-列表类型/元组类型/字典类型/集合类型内置方法
目录 列表类型内置方法 元组类型内置方法 字典类型内置方法 集合类型内置方法 列表类型内置方法 用来存多个元素,[]内用逗号隔开任意数据类型的元素 1. list()强制类型转换 print(list ...
- javascript模块化编程(一)(http://www.ruanyifeng.com/blog/2012/10/javascript_module.html)
Javascript模块化编程(一):模块的写法 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个 ...
- ARX自定义实体
本文介绍了构造自定义实体的步骤.必须继承的函数和必须注意的事项 1.新建一个从AcDbEntity继承的类,如EntTest,必须添加的头文件: "stdarx.h"," ...
- $.extend 合并对象(处理可传入0个或多个参数)
function test(options){ $.extend({ },this.Default,options); var v = thi ...
- Linux常用命令(简单的常用)
1. 文件和目录 cd /home 进入 '/ home' 目录' cd .. 返回上一级目录 cd ../.. 返回上两级目录 cd 进入个人的主目录 cd ~user1 进入个人的主目录 cd ...