• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
攻城狮的世界我不懂——lmky
梦想还是要有的!
博客园    首页    新随笔    联系   管理    订阅  订阅
CSS3透明背景+渐变样式

CSS3透明背景+渐变样式

转载自博文:《CSS3透明背景+渐变样式》 http://blog.csdn.net/netbug_nb/article/details/44343809
效果:


核心代码如下:

[css] view plain copy
  1. .map-interview {  
  2.     background-image:-webkit-linear-gradient(  
  3.     to right,   
  4.     rgba(0,0,0,0) 0%,   
  5.     rgba(0,0,0,0.4) 5%,   
  6.     rgba(0,0,0,0.6) 10%,   
  7.     rgba(0,0,0,0.6) 90%,   
  8.     rgba(0,0,0,0.4) 95%,   
  9.     rgba(0,0,0,0) 100%);  
  10.   background-image: linear-gradient(  
  11.     to right,   
  12.     rgba(0,0,0,0) 0%,   
  13.     rgba(0,0,0,0.4) 5%,   
  14.     rgba(0,0,0,0.6) 10%,   
  15.     rgba(0,0,0,0.6) 90%,   
  16.     rgba(0,0,0,0.4) 95%,   
  17.     rgba(0,0,0,0) 100%);  
  18.   height: 220px;  
  19.   left: 50%;  
  20.   margin-left: -350px;  
  21.   margin-top: -110px;  
  22.   padding: 10px 0px 10px 30px;   
  23.   position: absolute;  
  24.   top: 30%;  
  25.   width: 700px;  
  26.   border: 1px solid rgba(0, 0, 0, 0.1);  
  27. }  

 

posted on 2017-03-08 14:53  limeiky  阅读(13093)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3