背景渐变 gradient

原创 2016年08月30日 16:20:06
div { width:100px; height:100px; -webkit-transform:rotate(90deg);}
div:before {content:""; display:block; width:100px;height:50px; margin-top:10px;
padding:10px 10px 0 10px; box-sizing:border-box; border-top-left-radius:50px; border-top-right-radius:50px;
background:-webkit-gradient( linear, left top, right top, color-stop(0,#fff), color-stop(1,#fff) ),-webkit-gradient( linear, left top, right top, color-stop(0,#077df8), color-stop(1,#74baff) ); background-clip:content-box,padding-box; }
div:after {content:""; display:block; width:100px;height:50px; padding:10px; padding-top:0; box-sizing:border-box; border-bottom-left-radius:50px; border-bottom-right-radius:50px; background:-webkit-gradient( linear, left top, right top, color-stop(0,#fff), color-stop(1,#fff) ),-webkit-gradient( linear, left top, right top, color-stop(0,#fff), color-stop(1,#74baff) ); background-clip:content-box,padding-box; }

效果图 如下:
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

背景渐变:html5+css3中的background: -moz-linear-gradient

摘要 在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性。 背景使用CSS渐变显示可以不使用图...

Css3: gradient背景渐变

Css3: gradient背景渐变   原文链接:http://kk073000.blog.163.com/blog/static/34826942012123111322691/ ...

background:-webkit-gradient()背景渐变属性

webkit内核的safari、 Chrome的Linear Gradients (线性渐变)的几点说明及演示: webkit内核的safari、 Chrome的Linear Gradients (...

使用SVG实现gradient背景渐变(转)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1957 现在...

CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览...
  • ssisse
  • ssisse
  • 2016年07月14日 20:15
  • 262

ViewPager背景渐变

  • 2015年01月27日 16:11
  • 1.46MB
  • 下载

javascript图片背景渐变切换

  • 2010年02月02日 15:03
  • 155KB
  • 下载

ActionBar 背景渐变动画效果

App的样式/主题 如上图所示,这种模式要求ActionBar覆盖在内容之上,通过在style中设置android:windowActionBarOverlay属性即可实现这种效果。下面的代码显示如...

Android 标题背景渐变

  • 2016年12月08日 15:43
  • 28.01MB
  • 下载

css背景渐变几种样式

  • 2012年12月11日 15:26
  • 22KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:背景渐变 gradient
举报原因:
原因补充:

(最多只允许输入30个字)