itSeven7的博客

解决方法： 先缩小再还原 看起来像是放大了css3 动画手机上无法运行 解决方法 @-webkit-keyframes myfirst 加上前缀webkit

原理：利用css3的transform：rotate 属性！旋转三个包含关系的长方形即可，因为子级可以继承父级的rotate属性所以用下面的方法就可以实现！ 方法：父级旋转120deg，子级旋转 -60deg，孙子级旋转 -60deg !

background: linear-gradient( #404a59,#0f1319);css背景色设置渐变色只能渲染一屏大小，解决方案

如何让video宽高撑满父级，实现自适应。

常用css样式记录

今天在做一个浮动的分页器，测了一下IE9浏览器下居然不能居中，然后找了下原因， 是因为子级使用了浮动导致了在IE9下margin：0 auto属性失效了； 解决方法： 将自己的浮动样式去掉；添加上display:inline-block;属性，分页器就自动居中了；

css图片 垂直居中办法 方法一 ： 给img加上 vertical-align: middle; 属性 注意： 仅仅给img加上vertical-align: middle; 属性它不是真正的居中； 由于vertical-align属性的中线受字体大小的影响 ，所以要将父级的字体大小设置为0px;//样式<style>

理解BFC 与 marign

css图片置灰,变灰效果新项目有一个合作伙伴模块，需要将各个企业的logo先置灰，移入再恢复彩色。首先想到的是一套灰色一套彩色，两者互相切换src,但是觉得都css3了还搞这种方法就有点过时了，而且多一套资源，消耗性能. - 首先说一下，目前css实现方式是不兼容ie10+的浏览器的，所以对于ie10+的浏览器要使用js操作Canvas来实现；下面是css3的代码实现,兼容Ie9以...

最近在学习flexbox布局，就想着在开发中试一下，然后遇到了以下问题 ，总结一下。

css3实现页面平滑过渡

通过伪类来模拟li前面的图标，方法比用span标签模拟的舒服一些

Documentinput , textarea{outline:none;   //清除默认边框颜色}input:focus , textarea:focus{//为input添加focus 兼容IE8+border: 1px solid red;background: #ddd;}

正常的input file 标签长不是很好看 ！所以一般会进行修饰！修饰方法也就是用另一个好看标签来压住它！看代码 Document *{ margin: 0; padding: 0; } .box{ width: 110px; height: 34px; margin: 100px auto; position: re

select向下箭头隐藏方法：css{ appearance:none;     -moz-appearance:none;     -webkit-appearance:none;   -ms-appearance:none; }先清除默认样式，再使用span标签去代替下拉箭头样式。在IE下隐藏下来箭头css{select::-ms-expand { di

CSS3实现曲线阴影与翘角阴影demo

开启flex模式父级样式设置display：flex或者inline-flexflex父级容器属性：flex-direction控制子级排列方向，默认水平方向。row水平方向（默认）row-reverse(子级水平反向排列)column垂直方向   column-reverse(子级垂直反向排列)/**************************************

flex-box项目属性order || flex-grow || flex-shrink || flex-basisorder（秩序）在不改变html结构的情况下进行项目排序，默认情况下是0，从低到高排序，数值越大越靠后。li:nth-child(1){ order: 1; }li:nth-child(1){ order: 1; } li:nt

如使用flex布局时justify-content失效原因：子级中使用了margin：auto；属性会导致其失效，目前仅限于margin设置了auto值 其它数值不会导致失效。

看了阮一峰老师的博客，自己总结一下，原文地址 flexbox 任何一个容器都可以指定为flex布局； flex容器（父级），flex项目（子级）； 容器存在两根轴： 水平方向主轴（main axis）； 垂直方向交叉轴（cross axis）；

CSS图片水平垂直居中flex居中实现代码/* 父级添加 */display: flex;justify-content: center;align-items: center; /* IE10 + */&lt;div&gt; &lt;img src="./images/1.jpg" alt=""&gt;&lt;/div&gt;&lt;div&gt;...