专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

文本阴影 text-shadow 与 盒阴影 box-shadow 属性语法介绍

作者:鹏仔先生日期:2020-06-03浏览:258分类:CSS


文本阴影

    语法:

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

    水平偏移量: 向左为负,向右为正

    垂直偏移量: 向上为负,向下为正

    模糊度: 不允许设置负值,为0没有模糊度

    eg:

text-shadow: 5px 5px 8px #333, 8px 8px 8px #999;

    注: 多组值之间用逗号隔开


鹏仔小扩展:

    给文本添加边框(描边字体)

-webkit-text-stroke: 3px red;


盒阴影

    语法:

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

    eg:

box-shadow: 5px 5px 10px red, 7px 7px 10px blue;

    注: 盒阴影的类型分为外阴影和内阴影,默认为外阴影,如需添加内阴影,需要添加inset

    eg:

box-shadow: 3px 3px 3px gray inset;

    注: 扩展半径可以为正值,也可以为负值,常用的是正值

    eg:

box-shadow: inset 0px 0px 10px 20px pink;


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

请填写验证码

关灯