CSS文字阴影效果代码的写法

猪宝儿/ 01月14日/ CSS教程/ 浏览 384

CSS中,我们可以使用text-shadow属性来创建文本的阴影效果。


下述代码中,2px是阴影水平偏移和垂直偏移的距离,4px是阴影的模糊半径,rgba(0, 0, 0, 0.8)定义了阴影的颜色。


h1 {  
  /* 文字阴影的颜色、水平偏移量、垂直偏移量和模糊半径 */  
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);  
}


若我们想让文字的阴影效果更明显,增加阴影的模糊半径和偏移量就可以。例如:


h1 {  
  /* 文字阴影的颜色、水平偏移量、垂直偏移量和模糊半径 */  
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.75);  
}


当然了,我们也可以通过调整颜色来改变阴影的颜色。例如:


h1 {  
  /* 文字阴影的颜色、水平偏移量、垂直偏移量和模糊半径 */  
  text-shadow: 4px 4px 8px #ff0000;  
}

发表评论

暂无评论,抢个沙发...

客服 工单