1、阴影：box-shadow:0 5px 20px rgba(0,0,0,.1);


2、css实现滚动进度条效果：

body {

            position: relative;

            padding: 50px;

            font-size: 24px;

            line-height: 30px;

            background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);

            background-size: 100% calc(100% - 100vh + 5px);

            background-repeat: no-repeat;

            z-index:;

        }

        body::after {

            content: "";

            position: fixed;

            top: 5px;

            left:;

            bottom:;

            right:;

            background: #fff;

            z-index: -1;

        }

3、//转换（伸缩）

transform：scale（1.08）；

//过渡效果

transtion：all .3s ease；

4、三角形气泡弹窗

 <div class="send">

  <div class="arrow"></div>

 </div>

.send {

position: relative;

width: 150px;

height: 35px;

background: #000000;

border-radius: 5px;

/* 圆角 */

margin: 30px auto 0;

}

.send .arrow {

position: absolute;

top: 8px;

left: -16px;

/* 圆角的位置需要细心调试哦 */

width:;

height:;

font-size:;

border: solid 8px;

border-color: transparent #000000 transparent transparent;

}




5、几种实现div水平垂直居中的方法：




html:

<body>

        <div class="wp">

            <div class="box size">123123</div>

        </div>

    </body>

css:

/* 公共代码 */

  .wp {border: 1px solid red; width: 300px; height: 300px; }

  .box { background: green; }

  .box.size { width: 100px;height: 100px;}

/* 公共代码 */


/* 1、定位代码 */
     .wp {position: relative;}
     .box { position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }




/* 2、定位代码 */ .wp { position: relative; } .box { position: absolute;; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }




缺点:需要确定子元素宽高




/*3、 定位代码 */ .wp {position: relative;}.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}


flex 不需要确定子元素宽高


/*4、 定位代码 */






<div class="wp">

    <div class="box">123123</div>

</div>


.wp {

    display: flex;

    justify-content: center;

    align-items: center;

}






 


												


											
41、css总结的更多相关文章
	

    
						
  1. day 41 css固定位置 以及小米商城项目
		
    .如何让一个绝对定位的盒子居中 left:%; margin-left:- 宽度的一半 .固定定位 position: fixed; ()脱标 参考点:浏览器的左上角 作用:固定导航栏 返回顶部 小广 ...
    
		
    2. 
						
  2. 详解纯css实现瀑布流（multi-column多列及flex布局）
		
    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...
    
		
    3. 
						
  3. js和css兼容问题
		
    (一)html部分 1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]>  <script type="text/javascript" s ...
    
		
    4. 
						
  4. 【转】Web前端浏览器兼容初探
		
    原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...
    
		
    5. 
						
  5. Web前端浏览器兼容初探
		
    浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端 ...
    
		
    6. 
						
  6. iOS模拟器分辨率的问题(转载)
		
    转载地址:http://justsee.iteye.com/blog/2123545   不积跬步 无以至千里 不积小流 无以成江海   博客 微博 相册 收藏 留言 关于我     ios8/sdk ...
    
		
    7. 
						
  7. web前端-html学习笔记
		
    学习html最重要的是坚持.细心.多动手.慕课网<HTML+CSS基础课程>的笔记. 1.<h1>网站标题</h1> 如:<h1>腾讯网</h1& ...
    
		
    8. 
						
  8. 最新java学习路线：含阶段性java视频教程完整版
		
    最新java学习路线:带阶段性java视频教程版本 第一阶段:Java基础 学习目标: 掌握基本语法.面向对象.常用类.正则.集合.Io流.多线程.Nio.网络编程.JDK新特性.函数式编程 知识点细 ...
    
		
    9. 
						
  9. Sass进阶之路,之一(基础篇)
		
    Sass 学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢? Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了.预处理器通 ...
    
		
    10. 
						
  10. [转]Web前端浏览器兼容
		
    转自: http://www.admin10000.com/document/1900.html 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 使用plv8+ shortid npm包构建一个短唯一id服务
			
    plv8 是一个很强大的pg 扩展插件,我们可以直接额使用js 增强sql ,shortid 是一个用来生成短连接id 很方便的类库 因为shortid 是一个npm 模块,我们需要使用一种方法使用r ...
    
			
    2. 
						
  2. 安装PyInstaller失败
			
    pip install PyInstaller 报错: 后运行: 指定安装源进行安装: pip3 install pyinstaller -i https://pypi.doubanio.com/si ...
    
			
    3. 
						
  3. ESA2GJK1DH1K升级篇: 远程升级准备工作: 安装Web服务器
			
    前言 大家可以安装Apache,Tomcat,nginx 等Web服务器软件,这篇文章安装 OpenResty 作为Web服务器软件,该软件安装在云端电脑,如果想 安装到自己本地电脑实现该功能,可使用 ...
    
			
    4. 
						
  4. 奇技淫巧and板子
			
    目录 求第\(k\)大的数 求长度不小于L的子段使之和最大 ST表 \(O(1)\)实现能查询栈中最小元素 二分 树和图的深度优先遍历和广度优先遍历 树的dfs序 求树的重心 图的联通块划分 拓扑排序 ...
    
			
    5. 
						
  5. Windows平台搭建NodeJs开发环境以及HelloWorld展示—图解
			
    Windows 7系统下搭建NodeJs开发环境(NodeJs+WebStrom)以及Hello World!展示,大体思路如下:第一步:安装NodeJs运行环境.第二步:安装WebStrom开发工具 ...
    
			
    6. 
						
  6. CF1174E Ehab and the Expected GCD Problem（DP，数论）
			
    题目大意:对于一个序列,定义它的价值是它的所有前缀的 $\gcd$ 中互不相同的数的个数.给定整数 $n$,问在 $1$ 到 $n$ 的排列中,有多少个排列的价值达到最大值.答案对 $10^9+7$  ...
    
			
    7. 
						
  7. 2019年底前的web前端面试题初级-web标准应付HR大多面试问题
			
    作者 | Jeskson来源 | 达达前端小酒馆 问:你知道在css中,html的标签元素分多少中不同的类型吗? 答:大体可分三种:1,块状元素,2,内联元素,3,内联块状元素 块级元素:就是每个块级 ...
    
			
    8. 
						
  8. 使用Swagger2构建SpringMVC项目中的Restful API文档
			
    使用Swagger自动生成API文档,不仅增加了项目的可维护性,还提高了API的透明度更利于快速测试等工作,便于更快地发现和解决问题. 本篇文章只记录整合过程,关于Security Configura ...
    
			
    9. 
						
  9. CF852A Digits
			
    CF852A Digits 隔壁yijian大佬写出了正解.那我就写一个随机化大法吧? 我们先考虑一种错误的贪心,每个数字分成一位,使其分割后数字和最小.虽然这样是错的,但是我们发现错误的概率很小,所 ...
    
			
    10. 
						
  10. [技术博客]使用wx.downloadfile将图片下载到本地临时存储
			
    目录 目标 代码展示 重点讲解 目标 在上一篇技术博客中,我们生成的海报中包含图片,这些图片是存储到服务器上的,而canvas的drawimage函数只能读取本地文件,因此我们在drawCanvas之 ...
    
			
    11.