2017年5月29日
[CSS语法]clip-path
摘要： clip-path表示剪裁路径，也就是从某个物体上剪切一块内容。比如在图片上根据需要剪切一部分需要留下的区域。 这里涉及到两个概念: 裁剪路径clipping path，裁剪区域clipping region。 裁剪路径就是用来裁剪元素的路径，标记了需要裁剪的区域。可以是任意形状。 裁剪区域就是裁剪 阅读全文
posted @ 2017-05-29 21:01 小碎石 阅读(1549) 评论(0) 推荐(0)
[CSS揭秘]切角效果
摘要： 将角切掉也是一种流行的设计风格 传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果 有了CSS3,我们完全可以使用新技术来实现 第一种方案: CSS渐变 需求一: 一个矩形需要切掉一个45°角 使用线性渐变来实现 background: #58a linear-gradient 阅读全文
posted @ 2017-05-29 21:00 小碎石 阅读(2171) 评论(0) 推荐(0)
[CSS揭秘]菱形图片
摘要： 场景: 设计师设计了一个菱形区域用来展示图片 与平行四边形一节类似，可以采用将图片用容器包裹起来后旋转45度。同时将内部图片反方向旋转45度(因为容器旋转也会使得内部元素也旋转)。 方案一实现效果: 由于图片的宽度与容器的宽度一致，所以反方向旋转后会产生八边形。解决方案是将图片的宽度设置为容器宽度的 阅读全文
posted @ 2017-05-29 19:08 小碎石 阅读(1415) 评论(0) 推荐(0)