资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

CSS3中-webkit-box-reflect如何实现倒影-创新互联

这篇文章主要介绍CSS3中-webkit-box-reflect如何实现倒影，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

十载的龙马潭网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整龙马潭建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“龙马潭网站设计”,“龙马潭网站推广”以来，每个客户项目都认真落实执行。

在使用webkit内核的浏览器中(chrome,safari,移动端浏览器)，可以使用-webkit-box-reflect属性来实现倒影，语法如下所示

[ above | below | right | left ]? ? ?

该值包涵了三部分：方位+偏移量+遮罩层

方位是必不可少的；在使用遮罩层的时候，偏移量是不可少的，如没有则用零代替

！！！重要：遮罩层的效果与颜色无关，例如使用渐变颜色做遮罩，都是实色则透明，透明则暴漏原始颜色

使用示例如下所示：




  
  
  JS Bin
  
    .box{ width:200px; height:200px; margin-bottom:20px;transform:scale(-1,1); background-image:linear-gradient(90deg,red,yellow);-webkit-box-reflect:below 10px linear-gradient(180deg,transparent,#000); }
  


  

效果如下：

CSS3中-webkit-box-reflect如何实现倒影

如果需要在firefox中实现类似效果，可以使用-moz-element()函数来实现，但是在旋转下效果差别较大，如下所示。




  
  
  JS Bin
  
    .box{ width:200px; height:200px; margin:100px 0 0 100px; }
    .box1{ background-image:linear-gradient(180deg,red,yellow); transform:scale(1,-1) rotate(45deg)}
    .box2{ background-image:-moz-element(#box1); }
  


  
  

CSS3中-webkit-box-reflect如何实现倒影

在chrome下使用-webkit-box-reflect的效果是这样的

CSS3中-webkit-box-reflect如何实现倒影

如果要兼容IE浏览器还可以使用SVG或者canvas来做，SVG主要利用pattern+mask+linearGradient+scale来做，canvas使用scale+globalCompositeOperation。

SVG例子部分代码如下：


    
      
        
        
      
      
        
        
      
      
        
      
    
    

canvas例子部分代码如下

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

var linearGradient1 = ctx.createLinearGradient(0,0,0,200);
linearGradient1.addColorStop(0,"red");
linearGradient1.addColorStop(1,"yellow");

var linearGradient2 = ctx.createLinearGradient(0,0,0,200);
linearGradient2.addColorStop(0,"transparent");
linearGradient2.addColorStop(1,"#ffffff");

ctx.fillStyle = linearGradient1;
ctx.fillRect(0,0,200,200);

ctx.globalCompositeOperation = 'destination-out';

ctx.fillStyle = linearGradient2;
ctx.fillRect(0,0,200,200);

以上是“CSS3中-webkit-box-reflect如何实现倒影”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


文章题目：CSS3中-webkit-box-reflect如何实现倒影-创新互联
分享网址：http://cdkjz.cn/article/dsgsoi.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
航龙航空成都网络公司定制网站建设成都app软件开发公司成都网站推广四川LED亮化工程四川雅安服务器托管虚拟主机成都圣月制冷恒翔机电

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图