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

    xiaoxiao2023-10-17  153

    一、文本阴影

    语法: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主要用来设置背景图的定位区域

    最新回复(0)