css实现多个颜色渐变的小技巧_第1页
免费预览已结束，剩余1页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、css实现多个颜色渐变的小技巧在一些项目中，可以发觉大多数渐变几乎都是一样的。全部这些都是一种色彩逐渐变暗或变浅，所以制作每种色彩的新渐变感觉太棘手也太冗余。相反，我们可以制作一个渐变来用于全部渐变。那么它是如何实现的，下面我们就来详细的看看。（推举教程：css3视频教程）我在html中创建了常用按钮，并为它们提供了常用的类名和特定的类名以及一些样式来装点按钮。htmlbutton1button2button3button4button5css.buttonfloat:left;height:40px;line-height:40px;margin-right:20px;padding:015

2、px;color:fff;font-weight:bold;font-size:16px;font-family:arial;background-color:555;border-radius:5px;border:solid1pxrgba(0,0,0,0.5);给每个按钮独特的色彩（常规背景色彩）。css.button1background-color:orange;.button2background-color:red;.button3background-color:green;.button4background-color:royalblue;.button5background

3、-color:orangered;现在，使全部这些渐变是很简单的。我没有用法全彩色举行渐变，如红色和深红色，而是用法背景色为黑色的渐变，不透亮度为0直到黑色背景色的不透亮度为65。然后将此渐变添加到常用按钮类的透亮度中。css.buttonbackground-image:linear-gradient(rgba(0,0,0,0)0%,rgba(0,0,0,0.65)100%);好了，现在我们已经完成用法css中惟独一个渐变来制作多个渐变色。完整代码：.buttonfloat:left;height:40px;line-height:40px;margin-right:20px;padding

4、:015px;color:fff;font-weight:bold;font-size:16px;font-family:arial;background-color:555;border-radius:5px;border:solid1pxrgba(0,0,0,0.5);background-image:linear-gradient(rgba(0,0,0,0)0%,rgba(0,0,0,0.65)100%);/*w3c*/.button1background-color:orange;.button2background-color:red;.button3background-color:green;.button4background-color:royalblue;.button5backgrou

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论