4个非常实用的CSS代码片段你学会了吗？

文本加载...动画html正在加载...cssdot{display:inline-block;height:1em;line-height:1;text-align:left;vertical-align:-.25em;溢出：隐藏;}dot::before{display:block;content:'...\A..\A.';white-space:pre-wrap;animation:dot2sinfinitestep-startboth;}@keyframesdot{33%{transform:translateY(-2em);}66%{transform:translateY(-1em);}}上图代码看不懂请看下图，我注释掉一行的代码，你可以理解。原来是一个点元素，沿Y轴循环位移。隐藏的话可以看到加载动画效果。border实现边框当你需要这样一个上传文件和按钮的时候，你是想着自己找个图片设计，还是自己写一个？？？其实写CSS也很简单。添加图片.upload{position:relative;display:inline-block;width:76px;height:76px;color:#ccc;border:2pxdashed;/*边框虚线*/text-indent:-12em;/*使文本不可见*/transition:color.25s;/*悬停事件：颜色渐变动画*/overflow:hidden;margin:50px100px;}/*使用before/after伪类制作+号样式*/.upload:before,.upload:after{content:'';position:absolute;top:50%;left:50%;}.upload:hover{color:#34538b;}.upload::before{width:20px;border-top:4pxsolid;margin:-2px00-10px;}.upload::after{height:20px;border-left:4pxsolid;margin:-10px00-2px;}不规则投影滤镜当我们想给矩形或者其他可以用border-radius生成的形状添加投影时，可以使用box-shadow来解决，如图下图：但是当元素添加了一些伪元素或者半透明装饰后，box-shadow就有些力不从心了，因为border-radius会sha无视透明部分。此类情况包括以下几种情况：1.半透明图像、背景图像或边框图像（如老式金色相框）；2、元素设置了虚线、虚线或半透明边框，但没有背景（或者当background-clip不是border-box时）；3.对话泡泡，小尾巴一般用伪元素生成；4.几乎所有的倒角效果5.clip-path生成的形状。我们来看这个例子：html代码不规则投影