LLEARNING NOTES

技术 · 思考 · 实践 · 成长

首页/CSS/正文

css3之文字修饰 text-shadow文本阴影属性

CSS639 次阅读

一、语法

text-shadow: h-shadow v-shadow blur color; (水平→垂直→模糊→颜色)


image.png


二、使用方法

1、仅必选参数(无模糊、默认颜色)

/* 水平向右2px,垂直向下2px,无模糊,阴影颜色继承文本色(黑色) */
.text-shadow1 {
  text-shadow: 2px 2px;
  font-size: 32px;
  font-weight: bold;
}

2、完整参数(带模糊、自定义颜色)

/* 水平向右3px,垂直向下3px,模糊半径5px,阴影颜色浅灰色 */
.text-shadow2 {
  text-shadow: 3px 3px 5px #ccc;
  font-size: 32px;
  font-weight: bold;
}

3、负偏移量(阴影向左 / 向上)

/* 水平向左2px,垂直向上2px,模糊半径3px,阴影颜色深灰色 */
.text-shadow3 {
  text-shadow: -2px -2px 3px #666;
  font-size: 32px;
  font-weight: bold;
}



凡人做一事,便须全副精神注在此一事,首尾不懈,不可见异思迁,做这样,想那样,坐这山,望那山。人而无恒,终身一无所成。——曾国藩《曾国藩家书》

评论交流

理性讨论,共同进步
验证码

相关文章

继续阅读