-
CSS3 Gradient分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的W3C标准语法来分析其用法，其余大家可以查阅相关资料。W3C语法已经得到了IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等浏览器的支持。 这一小节我们来说一下线性渐变： 参数： 第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示： （单击图片可放大） 第一个参数省略时，默认为“180deg”，等同于“to bottom”。 第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。 background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet); 效果图：查看全部
-
border-box把元素的宽高都包含了border,padding查看全部
-
background-clip:noclip border-box padding-box content-box; 用于将背景图形做适当的裁剪,以适应际需要查看全部
-
@font-face{ font-family:"" src:url(); }查看全部
-
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;查看全部
-
box-shadow是向盒子添加阴影。支持添加一个或者多个。 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; X轴偏移量 必需。水平阴影的位置。允许负值。 Y轴偏移量 必需。垂直阴影的位置。允许负值。 阴影模糊半径 可选。模糊距离。 阴影扩展半径 可选。阴影的尺寸。 阴影颜色 可选。阴影的颜色。省略默认为黑色。 投影方式 可选。外部阴影 (outset)内部阴影（inset）,默认值为outset（outset是默认的，不需要添加）。 注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。 如果添加多个阴影，只需用逗号隔开即可。如： .box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; } x和y的偏移量相当于宽度！查看全部
-
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */查看全部
-
animation: run 5s infinite linear; 第二个参数5S，代表动画持续时间为5秒，数字越小动的越快！查看全部
-
感觉上右左下,为什么是顺时针 border-image:url(http://img1.sycdn.imooc.com//52e22a1c0001406e03040221.jpg) 79 79 100 30 repeat;查看全部
-
前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera查看全部
-
前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera查看全部
-
“:root”选择器等同于<html>元素，简单点说： :root{background:orange} html {background:orange;} 得到的效果等同。 建议使用:root方法。 另外在IE９以下还可以借助“:root”实现hack功能。查看全部
-
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin]查看全部
-
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。 语法： background-size: auto | <长度值> | <百分比> | cover | contain查看全部
-
background-clip 用来将背景图片做适当的裁剪以适应实际需要。查看全部
举报
0/150
提交
取消