废话不多说,直接上代码,希望能帮到有需要的小伙伴

  ①:遮罩

  

   position: fixed;
background: rgba(0, 0, 0, .4);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
width: 100%;
height: 100%;

  

  ②:三角(下面三角的代码按照下图上右下左的顺序排列)

  

   display: inline-block;
   width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: transparent transparent #000 transparent;
  display: inline-block;
  width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: #000 transparent transparent transparent;
  display: inline-block;
  width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: transparent #000 transparent transparent;
  display: inline-block;
  width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color: transparent #000 transparent transparent;

  ③:圆形

  

   display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #f6ad03;

  注:设置 border-radius 的值为宽高的一半,或者直接设置50%的百分比来制作圆形

  ④:图标

  

  width: 24px;
box-shadow: 0 10px 0 2px #999, 0 20px 0 2px #999, 0 30px 0 2px #999;

  

  ⑤:文字超出隐藏

  

  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  ⑥:垂直居中

  position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

  注:针对元素有固定宽高的情况

  

   position: fixed;
top: 50%;
left: 50%;
z-index: 999;
transform: translate(-50%,-50%);

  注:针对元素无固定宽高的情况

  

  ⑦:巧妙运用伪类::after,给元素添加边框,如下图

    content: '';
position: absolute;
right: 0;
bottom: 0;
left: 15px;
height: 1px;
background-color: #c8c7cc;

   注:不要忘记上面截图中的a标签要设置相对定位position:relative; 因为用伪类添加的边框是相对父元素a标签定位的

  

  

   ⑧:用CSS3的animation属性制作loading动画效果

   

       .loading {
margin: 0 auto;
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid #ddd;
border-left-color: #FFB5BF;
animation: loading-animation 1s linear infinite;
}
@keyframes loading-animation{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

   ⑨:气泡效果

   

    <div class="bubble">
<div class="triangle common"></div>
<div class="cover common"></div>
<!-- 用来覆盖的倒三角 -->
</div>

    

      .bubble {
width: 200px;
height: 40px;
border: 5px solid #FFB5BF;
position: relative;
} .common {
width:;
height:;
position: absolute;
/* 使用绝对定位 */
left: 50%;
transform: translate(-50%, 0);
/* 水平居中 */
} .triangle {
bottom: -20px;
border-top: 20px solid #FFB5BF;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
} .cover {
bottom: -13px;
border-top: 20px solid #94E8FF;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
} .cover {
border-top: 20px solid #fff;
}

几个实用的CSS代码段总结的更多相关文章

  1. 实用的JS代码段(表单篇)

    整理了下比较实用的Javascript代码段,完整的代码参考 1 多个window.onload方法 由于onload方法时在页面加载完成后,自动调用的.因此被广泛的使用,但是弊端是只能实用onloa ...

  2. 50个实用的jQuery代码段让你成为更好的Web前端工程师

    本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...

  3. 50个实用的jq代码段整理

    个人博客: http://mcchen.club   1. 如何创建嵌套的过滤器:   //允许你减少集合中的匹配元素的过滤器,   //只剩下那些与给定的选择器匹配的部分.在这种情况下,   //查 ...

  4. css代码段

    css文字超出省略 .demo{ display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; ...

  5. 让div显示在屏幕中央的css代码段

    .popup{ width:500px; height:400px; position:absolute; top:50%; left:50%; margin-top:-200px;     /*注意 ...

  6. 一些比较实用的css片段

    新看了一个帖子,里面好多实用的css代码块,可拿出来当做功能库.先附上该文地址http://segmentfault.com/a/1190000002773955 里面的内容很多我挑了几个经过我验证的 ...

  7. 超实用的HTML代码段(赵荣娇)

    第1章 创建HTML文档 11.1 HTML文档的基本结构 2 <html> <head> <title>Title of page</title> & ...

  8. 50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段

    50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段 本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从j ...

  9. 很实用的50个CSS代码片段

    原文:50 Useful CSS Snippets Every Designer Should Have          面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...

随机推荐

  1. .net webapi 接收 xml 格式数据的三种情况

    webapi 接收 xml 的三种方法 前段时间接到一个任务写一个小接口,要接收java端返回过来的短信xml数据. 刚拿到项目,我的第一想法是对方会以什么形式发送xml格式的数据给我呢,设想三种情况 ...

  2. [gazebo-1] process has died [pid 22855, exit code 255,

    [gazebo-1] process has died [pid 22855, exit code 255, cmd /opt/ros/kinetic/lib/gazebo_ros/gzserver ...

  3. 使用signalr实现网页和微信公众号实时聊天(上)

    最近项目中需要实现客户在公众号中和客服(客服使用后台网站系统)进行实时聊天的功能.折腾了一段时间,实现了这个功能.现在将过程记录下,以便有相同需求的同行可以参考,也是自己做个总结.这篇是上,用手机编辑 ...

  4. CUDA C

    一.CUDA结构 硬件:GPU(Graphics Processing Unit)   SM(Streaming Multiprocessor)     SP(Streaming Processor) ...

  5. Python Day 10

    阅读目录: 函数 函数的使用 函数的分类 函数的返回值 ##函数 ##函数的定义-----what?----什么是函数: # 函数:完成 特定 功能的代码块,作为一个整体,对其进行特定的命名,该名字就 ...

  6. formdata的使用方法

    function upload_single_file(value){ if(value==''){ layer.msg('请添加文件',{time:1500}) }else{ var formDat ...

  7. C#如何以管理员身份运行程序 转

    在使用winform程序获取调用cmd命令提示符时,如果是win7以上的操作系统,会需要必须以管理员身份运行才会执行成功,否则无效果或提示错误. 比如在通过winform程序执行cmd命令时,某些情况 ...

  8. IO模型的介绍

    Stevens 在文章中的一种IO Model: ****blocking IO    #阻塞 IO   (系统调用不返回结果并让当前线程一直阻塞,只有当该系统调用获得结果或者超时出错才返回) *** ...

  9. OC字典的使用

    在OC中,字符串.数组.字典是最常见的对象类型,但是在这三个当中,字典的用法相对较少,因为字典的属性和方法比较少,但是一个字典的用法比较复杂,因为在一个字典当中,既可以包含字符串,也可以包含数组,数组 ...

  10. EF学习笔记(十) 处理并发

    总目录:ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 上一篇:EF学习笔记(九):异步处理和存储过程 本篇原文链接:Handling Concurrency Concurrency ...