-
translate的百分比是根据自身的宽度和高度来定的，translate(-50%,-50%) 配合 top：50%，left：50% 实现了居中
查看全部 -
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。
查看全部 -
text-shadow:向文本添加一个或多个阴影
查看全部 -
border-radius
查看全部 -
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。
.clearfix::before, .clearfix::after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;}查看全部 -
“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。
查看全部 -
“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”
textarea:-moz-read-only{
border: 1px solid #ccc;
height: 50px;
resize: none;
background: #eee;
}
textarea:read-only {
border: 1px solid #ccc;
height: 50px;
resize: none;
background: #eee;
}
查看全部 -
“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，效果如下图所示：
有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。
查看全部 -
表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。
查看全部 -
.wrapper > div:nth-of-type(2n-1),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > :nth-child(4n-3),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > div:nth-of-type(odd),
.wrapper > p:nth-of-type(even){
background: orange;
}
查看全部 -
.wrapper > div:first-of-type { background: orange;}
查看全部 -
查看全部
-
ol > li:nth-child(2n-1){
background: green;
}
查看全部 -
萨达是大所多啥多
查看全部 -
adsadasdsadsad
查看全部
举报