计算机网络/计算机科学与应用/系统/运维/开发

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

一、语法

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;
}



照顾好自己,如果尚有余力,记得保护美好的东西,不畏不惧赤诚善良。

评论

^