纯CSS实现常见UI效果

前言切图是大多数前端自嘲的名字。相信很多人在平时写页面的时候，大部分时间都花在了剪图、排图等等。这里不是否定切图本身，而是质疑：一直切图对自己功力的增长有什么好处？想想UI丢给你一个好看的界面，但是你只需要一个img标签，或者一个background-image属性就搞定了，但是以后某处需要调整一些外观（颜色，文字等），你不是要让UI修改之前的材质，然后替换吗？这样就完全受制于UI，不能发挥自己的主动性。那么，如何打破这个僵局呢？很简单，如果你擅长CSS，你就不需要做裁图这种枯燥的工作了。那些界面和元素是你自己亲手创造的。虽然创造它们可能需要付出一些努力，但带来的回报也是巨大的。您不仅可以自由控制您创建的元素，还可以大大提高您的CSS技能。在用纯CSS实现这些效果之前，笔者先介绍几个常用的SCSSMixins和一个强大的武器，用它们来制作会事半功倍——cover@mixincover($top:0,$left:0,$width:100%,$height:100%){position:absolute;top:$top;left:$left;width:$width;height:$height;}当你想在originalelement》一个元素，覆盖在上面，你会用到它的demo地址：https://codepen.io/alphardex/pen/GRjEoBZembed-inset@mixininset($inset:0){position:absolute;top:$inset;left:$inset;right:$inset;bottom:$inset;}同理，这是在原元素的基础上复制一个元素，但是这个元素的位置和原元素一样，大小相同会在原有元素的基础上进行不同的增减。比如你想创建多个不同半径的同心圆，这个Mixin会有帮助。aqua.cssaqua.css是一个优雅、轻量级的CSS框架openso被作者逼的。里面有很多常用的组件和常用的样式类。用它来写CSS体验会很爽。在codepen上，作者准备了一个aqua.css模板，你可以用它来制作CSS。常见UI效果条纹效果2首先我们要把握好“框架”这个词，如何制作一个特殊的框架？如果通用的CSS属性无法实现，可以考虑使用伪元素来实现。思路是这样的：在原元素下创建一个背景为条纹的伪元素，并保证原元素将其覆盖，从而模拟边框的效果。那么如何创建条纹背景呢？这里我们将使用repeating-linear-gradient来实现Loremipsum...