纯CSS实现常见UI效果《详细介绍》

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