百变鹏仔-专注前端行业精选
文本阴影 text-shadow 与 盒阴影 box-shadow 属性语法介绍
作者:鹏仔先生 日期:2020-06-03 09:31:42 浏览:2859 分类: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;
猜你还喜欢
- 04-24 简单实现文字两端对齐
- 04-24 检测图片URL是否失效
- 04-24 elemetui中el-date-picker限制开始结束日期只能选择当月
- 04-24 iview中DatePicker时间段选择限制开始结束日期只能选择当月
- 03-24 vue h5实现车牌号输入框
- 11-01 vue中实现代码高亮
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 06-28 vue实现表格自动滚动功能 vue-seamless-scroll
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag