-
transition:需要过渡效果的元素，过渡花费的时间，过渡效果的时间曲线，过渡效果何时开始
查看全部 -
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间简写：
transition: all 3s ease-in-out .8s;(所有属性，持续3秒，先加速再减速变化，延迟0.8秒再执行变化，对于零可以省略)
查看全部 -
查看全部
-
属性选择器
通配符CSS
查看全部 -
方法讲解
https://q.cnblogs.com/q/97637/
查看全部 -
background-size 和放大镜的实现是不是相关呢
查看全部 -
+号是相邻兄弟选择器的结合符，选择紧接在另一个元素后的元素，而且二者有相同的父元素。比如这个选择的是type="radio"的input标签被选中时，后面紧跟的span标签。也就是改变的是这个span标签的样式
查看全部 -
.wrapper > div:nth-of-type(2n+1),.wrapper > p:nth-of-type(2n){ background: orange;}/*或者*/.wrapper > div:nth-of-type(odd),.wrapper > p:nth-of-type(even){ background: orange;}/*或者*/.wrapper > div:nth-of-type(2n-1),.wrapper > p:nth-of-type(even){ background: orange;}查看全部 -
“
:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素查看全部 -
box-shadow: X轴偏移量 Y轴偏移量[阴影模糊半径][阴影扩展半径][阴影颜色][投影方式]
查看全部 -
//导航菜单 <!doctype html><html><head> <meta charset="UTF-8"><title>CSS制作立体导航</title><link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css"><style>body{ background: #ebebeb;}.nav{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; background: #f65f57; /*制作圆*/ border-radius: 10px; box-shadow: 0 8px 0px #900; /*制作导航立体风格*/ }.nav a{ display: inline-block; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in;}.nav a:hover{ -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -ms-transform:rotate(10deg); transform:rotate(10deg);}.nav li{ position:relative; display:inline-block; padding:0 16px; font-size: 13px; text-shadow:1px 2px 4px rgba(0,0,0,.5); list-style: none outside none;}/*使用伪元素制作导航列表项分隔线*/.nav li::before,.nav li::after{ content:""; position:absolute; top:14px; height: 25px; width: 1px;}.nav li::after{ right: 0; background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));}.nav li::before{ left: 0; background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);} /*删除第一项和最后一项导航分隔线*/ .nav li:first-child::before{ background: none;} .nav li:last-child::after{ background: none;}.nav a,.nav a:hover{ color:#fff; text-decoration: none;}</style></head><body><ul class="nav"> <li><a href="">Home</a></li> <li><a href="">About Me</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Blog</a></li> <li><a href="">Resources</a></li> <li><a href="">Contact Me</a></li></ul></body></html>查看全部 -
默认width和height为content宽高，增加padding使盒子变大，内容区域大小不变。
设置box-sizing：border-box则在增加padding时盒子不变内容区域缩小。
查看全部 -
注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。
查看全部 -
1、-moz代表firefox浏览器私有属性
2、-ms代表ie浏览器私有属性
3、-webkit代表safari、chrome私有属性
这些是为了兼容老版本的写法，比较新版本的浏览器都支持直接写：border-radius。
现在比较流行的一个概念就是：不太关键的样式，可以不考虑兼容，比如你说的圆角，并不影响内容的显示，如果客户浏览器太旧，就让他看到旧的方形效果就是，一定要看到新效果，只能建议客户升级浏览器。
查看全部 -
background-clip属性
语法：
background-clip ： border-box | padding-box | content-box | no-clip
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。
backgroud-clip默认值为border-box。查看全部
举报