背景渐变 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; }

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

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

相关文章推荐

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

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

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

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

背景渐变: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/ ...

ViewPager背景渐变

  • 2015-01-27 16:11
  • 1.46MB
  • 下载

Android 使用xml实现边框阴影,背景渐变效果(附有RGB颜色查询对照表)

上图是显示效果,下面是代码实现: 个人理解就是使用layer-list实现两层view的叠加,其中top,left,bottom,left控制阴影 xml version="1.0" encodin...

Android 标题背景渐变

  • 2016-12-08 15:43
  • 28.01MB
  • 下载

css背景渐变几种样式

  • 2012-12-11 15:26
  • 22KB
  • 下载

css选择器,背景渐变

Css选择器 http://www.w3.org/TR/selectors/#selectors 1.    标签选择器,就是给常用的tag加上样式: div{padding:0; margin...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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