Fork me on GitHub

玩转clip-path

一.基本概念

什么是clip-path呢?简而言之就是实现裁剪的css属性,我们可以通过该属性创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的部分隐藏。通过指定路径就可以创建出自己想要的形状,这样网页中的布局就可以是多种多样的了。

clip-path出现之前,css还有个属性clip也支持裁剪,但是它只支持矩形裁剪,同时它只对position:absoluteposition:fixed的元素生效。使用如下:

1
2
clip: rect(50px,50px,50px,50px) //标准写法
clip: rect(50px 50px 50px 50px) //兼容浏览器写法

目前所有主流浏览器都支持clip,但是因为其局限性,clip已经被clip-path代替。clip-path为我们带来了更多的可能,让我们制作出更多有趣的图案。
阅读更多...

前端面试题 --vue

1. 说一下Vue的双向绑定数据的原理

vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 settergetter,在数据变动时发布消息给订阅者,触发相应监听回调

阅读更多...

javascript数据属性和访问器属性

前言

javascript中,我们访问对象的时候可以直接通过obj.name进行访问,删除时可以直接通过delete obj.name进行删除,那么你真的知道它为什么能直接访问或则删除么?如果你知道javascript中的数据属性,那就自然知道为什么能访问了;如果不知道呢,咱就接着往下看。
阅读更多...

  • © 2019-2022 YmTonny
  • 访问量: 独立访客:

请我喝杯咖啡吧~

支付宝
微信