css3渐变色

Rounded Rectangle 3 { width:
92px; height: 66px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #ff008a; -webkit-box-shadow: 1px
1px 3px rgba(0,0,0,.75), inset 0 33px rgba(255,255,255,.21), inset 0 0 17px
rgba(255,255,190,.41); -moz-box-shadow: 1px
1px 3px rgba(0,0,0,.75), inset 0 33px rgba(255,255,255,.21), inset 0 0 17px
rgba(255,255,190,.41); box-shadow: 1px 1px 3px
rgba(0,0,0,.75), inset 0 33px rgba(255,255,255,.21), inset 0 0 17px
rgba(255,255,190,.41); border: solid 1px
#ff5337; background-image: -webkit-linear-gradient(bottom, rgba(222,0,120,.74),
rgba(255,150,0,.74)); background-image: -moz-linear-gradient(bottom, rgba(222,0,120,.74),
rgba(255,150,0,.74)); background-image: -o-linear-gradient(bottom, rgba(222,0,120,.74),
rgba(255,150,0,.74)); background-image: linear-gradient(to top, rgba(222,0,120,.74),
rgba(255,150,0,.74)); }

Rounded Rectangle 4 { width:
89px; height: 78px; -webkit-border-radius: 40px 10px 10px; -moz-border-radius: 40px 10px 10px; border-radius: 40px
10px 10px; background-color: #00d2ff; -webkit-box-shadow: 0
1px 3px rgba(0,0,0,.75), inset 0 1px rgba(255,255,255,.65), inset 0 0 25px
rgba(255,255,190,.41); -moz-box-shadow: 0 1px
3px rgba(0,0,0,.75), inset 0 1px rgba(255,255,255,.65), inset 0 0 25px
rgba(255,255,190,.41); box-shadow: 0 1px 3px
rgba(0,0,0,.75), inset 0 1px rgba(255,255,255,.65), inset 0 0 25px
rgba(255,255,190,.41); border: solid 1px
#07a1d3; background-image: -webkit-linear-gradient(bottom, rgba(0,126,255,.74),
rgba(0,255,234,.74)); background-image: -moz-linear-gradient(bottom, rgba(0,126,255,.74),
rgba(0,255,234,.74)); background-image: -o-linear-gradient(bottom, rgba(0,126,255,.74),
rgba(0,255,234,.74)); background-image: linear-gradient(to top, rgba(0,126,255,.74),
rgba(0,255,234,.74)); }

css3渐变色,码迷,mamicode.com

时间： 2024-12-20 01:19:50

css3渐变色的相关文章

CSS3实现背景颜色渐变

CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3出来以前,想要显示一个渐变的效果,必须要专门制作一个图片. CSS3的出现,使得渐变色得以简单的实现.由于不是所有的浏览器都支持CSS3,所以不是所有的浏览器都能够显现出渐变的效果来. 目前,Mozilla内核的(Firefox)和webkit内核的(Safari/Chrome)浏览器支持这一属性.

web前端小案例-css3制作浏览器背景渐变背

知识点:rgb全色循环算法,HEX与RGB颜色转换算法.CSS3颜色渐变,CSS3渐变色兼容ie方法,定时器与循环,函数封装,数组应用等. css代码: <style> *{margin:0;padding:0;} body#wrap{width:100%;height:500px; } </style> JavaScript代码: <script> function convert(sRgb){ /*rgb转换成HEX*/ var sRgb=sRgb; var sHe

倒影（转）

CSS3图片倒影技术 2014年5月13日 歪脖骇客 2条评论 13 目前为止我们已经探讨了很多CSS3中的新功能和新特征.除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Prefix)来实现很多自定义的CSS功能.-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征.-webkit-box-reflect的作用是让图片出现倒影. 观看演示 实现倒影的基本语法

CSS3 外发光 渐变色

渐变色--线性渐变 linear-gradient #bg { width: 100%; background: -webkit-linear-gradient(#9f1c65, #d89068,#7d1467,#ffe66c); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(#9f1c65, #d89068,#7d1467,#ffe66c); /* Opera 11.1 - 12.0 */ background: -moz-line

【CSS3】---颜色RGBA及渐变色

颜色之RGBA RGB是一种色彩标准,是由红(R).绿(G).蓝(B)的变化以及相互叠加来得到各式各样的颜色.RGBA是在RGB的基础上增加了控制alpha透明度的参数. 语法: color:rgba(R,G,B,A) R.G.B三个颜色参数,正整数值的取值范围为:0 - 255. 百分数值的取值范围为:0.0% - 100.0%.超出范围的数值将被截至其最接近的取值极限.并非所有浏览器都支持使用百分数值. A为透明度参数,取值在0~1之间,不可为负值. 代码示例: background-col

CSS3总结二：（background）背景/渐变色函数

background-color(CSS2) background-image background-position background-size background-repeat background-attachment background-origin background-clip 一.背景渐变色 linear-gradient() ==>路径渐变 radial-gradient() ==>经向渐变 repeating-linear-gradient() repeating-r

css3实现border渐变色

心血来潮 什么都不说 上代码 .gradualChange{width: 300px;height: 300px;border:20px solid;//兼容border-image: -webkit-linear-gradient(#000,#333,#000) 30 30;border-image: -moz-linear-gradient(#000,#333,#000) 30 30;border-image: linear-gradient(#000,#333,#000) 30 30;}

css3 Gradient背景

css3的gradient分为两种:线性渐变(linear)和径向渐变(radial). 一.线性渐变linear-gradient 1.介绍 linear-gradient([设置方向],[设置开始颜色],[设置多种过度颜色],[设置结束颜色]) 参数: 第一个参数:指定渐变方向,可以用"角度"的关键字或"英文"来表示: 第一个参数默认:180deg,等同于"to bottom". 后面的颜色至少有2个,即开始颜色和结束颜色. 2.使用 a.举

css3

现在移动端单位基本都用rem加百分比布局,能适应各种手机 垂直居中问题: https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/ 方法三 这种方法,在 content 元素外插入一个 div.设置此 div height:50%; margin-bottom:-contentheight;. content 清除浮动,并显示在中间. <divid="floater&q