[分享]css3描边加投影

CSS3是一个强大的前端技术，它可以让我们轻松地实现各种效果，其中描边和投影是非常流行的效果。在CSS3中，我们可以使用boxshadow属性来添加投影效果，并使用textshadow属性来添加文字阴...

CSS3是一个强大的前端技术，它可以让我们轻松地实现各种效果，其中描边和投影是非常流行的效果。

在CSS3中，我们可以使用box-shadow属性来添加投影效果，并使用text-shadow属性来添加文字阴影。下面是一个例子：

/* 添加盒子投影 */
.box {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* 添加文字阴影 */
h1 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
} 

除了投影效果外，我们还可以使用text-stroke属性来添加文字描边效果。下面是一个例子：

/* 添加文字描边 */
h2 {
  -webkit-text-stroke: 1px black;
} 

当然，除了单一的颜色，我们还可以使用线性渐变来实现更复杂的描边效果。下面是一个例子：

/* 使用线性渐变添加文字描边 */
h3 {
  -webkit-text-fill-color: transparent; /* 隐藏文字颜色 */
  -webkit-text-stroke: 1px linear-gradient(to right, #F00, #00F);
} 

总的来说，CSS3中的描边和投影效果非常方便实用，可以大大提升我们页面的视觉吸引力。