-webkit-transition: all .5s ease-in .18s;
transition:all .5s ease-in .18s;
简写
transition:all .5s ease-in .18s;
简写
2016-11-30
display:flex;
flex-direction:row;//方向水平,垂直为column
align-items: center; //居中
justify-content:center; //居中
flex-direction设置为row,设置justify-content控制方向;如果设置为column,设置align-items控制方向。
flex-direction:row;//方向水平,垂直为column
align-items: center; //居中
justify-content:center; //居中
flex-direction设置为row,设置justify-content控制方向;如果设置为column,设置align-items控制方向。
2016-11-30
box-sizing:border-box在自适应布局当中,在元素基础上添加内距padding,按照标准盒模型解析,往往会将布局撑破,但使用box-sizing的border-box值,可以让你轻松完成。
2016-11-30
复制到浏览器,最后的分割线用原代码删不掉:
.nav li:last-child::after{
background: none;
}
.nav li:last-child::after{
background: none;
}
2016-11-30
如果分开写,是不起效果的
如下
<style>
.example9 .box div{background:url(img/car.jpg) no-repeat;border:10px dashed #ccc;padding:10px;}
.example9 .box1{background-origin:border-box;}
.example9 .box2{background-origin:padding-box;}
.example9 .box3{background-origin:content-box;}
</style>
如下
<style>
.example9 .box div{background:url(img/car.jpg) no-repeat;border:10px dashed #ccc;padding:10px;}
.example9 .box1{background-origin:border-box;}
.example9 .box2{background-origin:padding-box;}
.example9 .box3{background-origin:content-box;}
</style>
2016-11-29
background: radial-gradient(center, shape size, start-color, ..., last-color);
2016-11-29
only-of-type與only -type的差別在於 第二個只可以選著一個 第一可以多選但是前提是他只喜歡一個的其中的一個
2016-11-28
box-shadow:0px 0px 6px 2px #666 inset; /*内边框阴影*/
box-shadow:4px 4px 6px red, -4px -4px 6px red; /*外边框阴影*/
box-shadow: 5px 5px 5px 0px red, -5px -5px 5px 0px red, -5px 5px 5px 0px red, 5px -5px 5px 0px red; /*外边框阴影*/
box-shadow:4px 4px 6px red, -4px -4px 6px red; /*外边框阴影*/
box-shadow: 5px 5px 5px 0px red, -5px -5px 5px 0px red, -5px 5px 5px 0px red, 5px -5px 5px 0px red; /*外边框阴影*/
2016-11-28