阴影及背景切割，背景原点

一、文本阴影

语法：text-shadow:水平偏移量 垂直偏移量 模糊度 颜色值;

注：a) 水平偏移量 向右为正，向左为负

b) 垂直偏移量    向下为正，向上为负

c) 模糊度        默认值为0，值越大模糊度越大，不允许设置负值

eg: text-shadow: 3px 3px 5px red,5px 5px 5px blue;

注：设置多组值时用逗号分隔

扩展：文字描边

语法：-webkit-text-stroke:3px blue;

二、盒阴影

语法：box-shadow:水平偏移量 垂直偏移量 模糊度 扩展半径 颜色值;

注：a) 盒阴影默认为外阴影，如果要设置为内阴影时，添加inset

eg: box-shadow:inset 5px 5px 7px red;

b) 扩展半径  值越大扩展半径越大，可以设置负值

eg: box-shadow:0 0 5px 5px blue;

c) 设置多组值时，用逗号分隔

eg: box-shadow:3px 3px 5px #333,5px 5px 5px #666,8px 8px 5px #999;

扩展：多背景图

语法：background:url(1.jpg) left top no-repeat,
url(2.jpg) right top no-repeat,
url(3.jpg) right bottom no-repeat,
url(4.jpg) left bottom no-repeat,
url(bg.jpg);

注：多张背景图用逗号分隔

三、背景切割

语法：background-clip:border-box|padding-box|content-box;

border-box 默认值，背景在边框及边框以内的区域可见

padding-box 背景在padding和content区域可见

content-box 背景只在content区域可见

注：background-clip主要用来设置背景在哪个区域可见

四、背景原点

语法：background-origin:border-box|padding-box|content-box;

padding-box 默认值，背景图原点从padding区域开始

border-box 背景图原点从border区域开始

content-box 背景图原点从content区域开始

注：background-origin主要用来设置背景图的定位区域