CSS style tips: Create eye-catching text, taking into account white edges and shadows

In web design, adding white edges and shadows to text can significantly improve visual and readability. This article will explore how to achieve this effect efficiently and solve common problems.

Some developers try to create text white edges through text-shadow property, but the effect is not ideal, especially when adding shadows. For example, although the following code can produce white edges, it cannot add valid shadows at the same time:

 .text-with-border {
  color: black; /* text color*/
  text-shadow: 
    -1px -1px 0 #fff, /* White shadow on the upper left*/
     1px -1px 0 #fff, /* White shadow on the upper right*/
    -1px 1px 0 #fff, /* White shadow on the lower left*/
     1px 1px 0 #fff; /* White shadow on the lower right*/
}

A more efficient solution is to utilize -webkit-text-stroke attribute. This property is specifically used to create text strokes, allowing precise control of the width and color of the stroke. The following code shows how to create white edges using -webkit-text-stroke :

 .text {
  -webkit-text-stroke: 2px white; /* 2 pixels wide white stroke*/
}

In order to add shadow effects at the same time, just combine text-shadow property:

 .text {
  -webkit-text-stroke: 6px white; /* 6 pixels wide white stroke*/
  text-shadow: 0 4px 0 black; /* black shadow*/
}

Through this method, we successfully added clear white edges and shadows to the text, which enhanced the visual impact of the text and provided designers with more flexible style control. Remember, -webkit-text-stroke has browser compatibility issues and needs to choose a suitable alternative or add a prefix based on the actual situation.

The above is the detailed content of . For more information, please follow other related articles on the PHP Chinese website!