非常实用的CSS代码段有哪些

这篇“非常实用的CSS代码段有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“非常实用的CSS代码段有哪些”文章吧。

html

css

如果你看上图代码没有看懂，请看下图，我注释掉一行代码，你就明白了。原来是dot元素，沿着Y轴在循环位移，隐藏掉就让你看到了加载的动画效果。

当你需要这样一个上传文件，按钮时，你考虑的是找设计弄个图片，还是自己写一个？？？

其实CSS写，也很简单的。

当我们想给一个矩形或其他能用 border-radius 生成的形状加投影时，用 box-shadow 都可以解决，如下图：

但是，当元素添加了一些伪元素或半透明的装饰之后，box-shadow就有些 力不从心了，因为 border-radius 会无耻地忽视透明部分。这类情况包括下列几种情况:

1、半透明图像、背景图像、或者 border-image(比如老式的金质像框);

2、元素设置了点状、虚线或半透明的边框，但没有背景(或者当 background-clip 不是 border-box 时);

3、对话气泡，它的小尾巴通常是用伪元素生成的;

4、几乎所有的折角效果

5、通过 clip-path 生成的形状。

下面来看看这个示例： html代码

css样式

从上图可以看出box-shadow搞不定的，drop-shadow给搞定了。这是为什么了？

可以很明显的看出区别，为什么会这样呢？在这里我用的是div标签，大家都知道，div标签是个块标签，说白了是个盒模型，指的是一块区域，box-shadow的属性只能添加到盒模型外面，因此内部的东西是不会添加上的，就变成上图的样子，中间还是白色部分。而drop-shadow就不一样了，他是把所有的非透明区域都做了阴影效果，就相当于一种真正的投影。

经常在网页中看到一些Dialog，例如有些网页点击登录注册时就会跳出一个弹框来显示登录注册页面，下面就使用 css 完成一个可以自适应，无论窗口的大小，始终能保持水平垂直居中的dialog。

css样式

以上就是关于“非常实用的CSS代码段有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。