CSS span area border color and style design

 The CSS syntax can easily modify the border color and border style of the span area, so that the span area that is preset to have no color and no border style shows a unique visual style. For example, :D is a span with a border style area, designed to span the border color design and style, you can use CSS 's border property once completed, we first span with border after basic syntax familiar with the property, again applied to the example look at the actual results.

CSS span area tag syntax

<span style="style">content to be marked</span>

CSS designers can easily design styles through the style in the span tag. The border attribute to be used later should be placed in the style. For the detailed usage of span , please refer to: CSS span tag usage introduction .

CSS border border property syntax

border: thickness color style;

The above border property contains three effects of border thickness, color and style at one time, so these three parameters must be set separately. CSS allows web designers to use various effects to design with different properties, such as border-width for thickness. The color is designed with border-color and the style is designed with border-style , but we will introduce it here in a simplified way so as not to be too complicated. For the detailed usage of the border property, please refer to: CSS border .

CSS span area border color and style design example

<span style="border:3px green solid;">This is solid green border.</span>
<span style="border:3px blue double;">This is double blue border.</span>
<span style="border:3px red dashed;">This is dashed red border.</span>

Visual effects of the example

This is solid green border. This is double blue border. This is dashed red border.

In the example a total of three different span region, we take advantage of CSS 's border attribute for them plus a distinctive border effect, the first frame is solid green line, the second frame is blue double solid line, The third span is a red dotted border. In addition, in order to make the effect of these borders more obvious, we also set the thickness of the three borders to 3px, especially the blue double solid border. to see that the difference was so thick, that's the use of CSS 's border attribute to design span common border area of skills, through such techniques can change a lot of different visual style.