一、盒子阴影和文字阴影 box-shadow; 盒子阴影 ie9 语法： box-shadow:1px 2px 3px 4px color; 5个参数： 参数一：水平偏移量 +- 必选 参数二：垂直偏移量 +- 必选 参数三：阴影模糊值 + 必选 参数四：阴影外延值 + 可选 参数五：阴影的颜色 color 必选 外延值可以省略 一个盒子可以有多个阴影 box-shadow:0px 0px 12px red, 2px 2px 3px 3px orange; 设置内阴影：默认阴影都是外阴影 inset box-shadow:inset 0 0 32px 10px red; text-shadow: 文本阴影 4个参数，没有外延值 ie10 text-shadow :1px 1px 1px red;二、图片边框 ie10 border-image 设置图片边框 border-image:border-image-source || border-image-slice[/border-image-width?[/border-image-outset]?]? || border-image-repeat border-image-source:用于设置图片边框的路劲 border-image-slice:图片边框向内的偏移量 border-image-width:图片边框的宽度 border-image-outset:图片边框图像区域超出边框的偏移量 border-image-repeat:指定图片边框背景填充方式 stretch | repeat | round stretch：默认的，拉伸填充 repeat：指定平铺填充背景图片，当遇到边界时，被剪断 round：指定平铺填充背景图片，会根据边框的尺寸，动态调整图片的大小，直到图片的大小刚好能够填充整个边框三、背景background 如果没有渐变的时候，我们可以使用渐变的图片进行横向平铺实现渐变的效果 CSS3中有一个特殊方法可以实现渐变， ie9开始兼容 语法： background-image:-webkit-linear-gradient(top,red,blue) -webkit-:谷歌等谷歌内核浏览器的前缀 -moz-：火狐前缀 -ms-:ie前缀 -o-:欧朋前缀 1.线性渐变 -webkit-linear-gradient(top,red,blue); 参数1：top 从上到下渐变 bottom： 从下到上渐变 right 从左到右渐变 left 从右到左渐变 top-left 左上渐变到右下 45deg 角度 30px 值 参数2：从哪个颜色开始渐变 20%表示从20%的位置开始渐变为红色 参数3：渐变到哪个颜色 60%表示从60%开始渐变为蓝色 参数1使用角度时： 使用谷歌、火狐、ie、欧朋等标准浏览器时，水平向左为0deg，向下是90deg； 如果不加前缀，使用w3c的标准 ，向下是0deg，向左是90deg 通常不使用角度进行渐变，一般是方位词 2.径向渐变 -webkit-radius-gradient() 径向渐变起点一般使用px值 -webkit-radius-gradient(100px 80px,red,blue,green); 3.文字渐变 文本填充颜色，-webkit-text-fill-color: 不支持ie，只能支持-webkit-内核的浏览器 背景切割(文本进行切割) -webkit-background-clip:text;不支持ie，只能支持-webkit-内核的浏览器
转载于:https://www.cnblogs.com/txf-123/p/11190089.html
相关资源：各显卡算力对照表！