-
1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； 2、X轴偏移量和Y轴偏移量值可以设置为负数 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; X轴偏移量为负数： .boxshadow-outset{ width:100px; height:100px; box-shadow:-4px 4px 6px #666; } Y轴偏移量为负数： .boxshadow-outset{ width:100px; height:100px; box-shadow:4px -4px 6px #666; }查看全部
-
white-space:nowrap; 强制文本在一行内显示 overflow:hidden; 溢出内容为隐藏 text-overflow:ellipsis; 溢出时产生省略号的效果查看全部
-
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。
/*类名为clearfix的div元素*/ .clearfix::before, .clearfix::after { content: ""; /*content的中文是内容，感觉是在div的前后插入 内容为 空，相当于加入一个空元素*/ display: block; /*显示为块状元素*/ height: 0; /*高度为0*/ visibility: hidden; /*visbility是可见性，可视化的意思，hidden隐藏*/ } .clearfix:after {clear: both;}/*clear : none | left|right| both 。clear为清除浮动，clear:both为清除全部浮动*/ .clearfix {zoom: 1;}/*低版本IE浏览器的清除浮动*/阴影效果，也是通过这个来实现的
.effect::before, .effect::after{ /*类名为effect的div元素*/ content:""; /*content的中文是内容，感觉是在div的前后插入 内容为 空，相当于加入一个空元素，然后为这两个空元素添加阴影特效*/ position:absolute; /*绝对定位*/ z-index:-1; /*遮罩效果，值小的远离用户*/ -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); /*-webkit是为了让chrome和safari浏览器更好的兼容。加入边框阴影:X轴偏移量，Y轴偏移量，[阴影颜色] rgba的a是透明度参数*/ -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); /*-moz是为了让Firefox兼容*/ box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; /*div元素高离父元素的50%*/ bottom:0; /*底部距离父元素为0，贴紧底部*/ left:10px; right:10px; -moz-border-radius:100px / 10px; /*圆角效果*/ border-radius:100px / 10px; /*如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径*/ }上面代码作用在class名叫.effect上的div的前（before）后(after)都添加一个空元素，然后为这两个空元素添加阴影特效
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>before、after</title> </head> <body> <div class=".effect"> </div> </body> </html>
查看全部 -
* 含有 任意位置 ^ 开头 $ 结尾查看全部
-
啊，研究了一会儿，终于看懂了。。 这个效果是这么实现的： 1、box背景色设为橙色的圆形 2、box中子元素包括单选按钮radio（默认样式）和span（背景为白色圆形，我们的自定义样式），但是radio不显示（因为是完全透明的） 3、被选中的单选按钮和span会显示（完全不透明），而未被选中的单选按钮不显示（因为是完全透明的）查看全部
-
【最后做】 根本没讲如何使用“perspective”给元素设置3D舞台布景，大家看看张鑫旭老师这篇文章吧，看完基本就能做这个实例了。http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 建议大家把源码下载下来，再将那些为了兼容性写的代码全部删除。这样看源码比较简单，再对照着任务提示观看源码，基本就可以把远离弄懂，最后自己再上手一遍，基本就会了。查看全部
-
:only-child 小明的爸爸只有小明一个孩子 :only-of-type 小明的爸爸有龙凤胎，小明是唯一的儿子查看全部
-
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());查看全部
-
这玩意太难了，不懂的同学可以参考下这个 http://blog.csdn.net/henren555/article/details/9699449查看全部
-
matrix(scaleX,skewX,skewY,scaleY,translateX,translateY)查看全部
-
注意：span没有设置display:block时不能旋转。块级元素才可以旋转查看全部
-
>用于选择指定标签元素的第一代子元素 看清楚 是第一代 第一代里有N个子元素 所以还需要用first-child来指定第一个查看全部
-
E[att^="val"]选择匹配元素E,且E元素定义了属性att,其属性值以val开头的任何字符串 E[att&="val"]选择匹配元素E,且E元素定义了属性att,其属性值以val结尾的任何字符串 E[att*="val"]选择匹配元素E,且元素定义了属性att,其属性值任意位置包含了"val" <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon">我类名是icon</a> <a href="#" title="我的title是more">我的title是more</a> a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }查看全部
-
>是子元素选择器，空格是后代选择器，他们的区别： 后代选择器：匹配父子关系和祖先-后代关系 子元素选择器：匹配父子关系 就是>（子元素选择器）只是匹配到他下面的一层，而不是多层查看全部
-
懵逼了查看全部
举报
0/150
提交
取消