Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "the method tutorial of using characters instead of rounded corners". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

I. Relationship between font and character display

The sharp corners here in the left and right directions are in Song font:

Not affected by font type: <>

The sharp corners here on the left and right are in Arial:

Not affected by font type: <>

The sharp corners here on the left and right are in Lucida Sans Unicode:

Not affected by font type: <>

The left and right corners here are in Times New Roman:

Not affected by font type: <>

The sharp corners here on the left and right, the font is Verdana:

Not affected by font type: <>

Here the sharp angle in the upper and lower direction, the font is Song, the small sharp angle: ˇ^

Typeface independent: $>$>$>$>

Here the sharp angle in the up and down direction, the font is Arial, the small sharp angle: ˇ^

Typeface independent: $>$>$>$>

Here the sharp corner in the up-down direction, the font is Lucida Sans Unicode, the small sharp corner: ˇ^

Typeface independent: $>$>$>$>

Here the sharp angle in the up-down direction, the font is Times New Roman, the small sharp angle: ˇ^

Typeface independent: $>$>$>$>

Here the sharp angle in the up and down direction, the font is Verdana, the small sharp angle: ˇ^

Typeface independent: $>$>$>$>

Here is a 45 degree angle, the font is Song:

Here is a 45-degree angular polygon entity in Arial:

This is a 45-degree angle in Lucida Sans Unicode:

This is a 45-degree angle in Times New Roman:

This is a 45-degree angle, and the font is Verdana:

Here is the sharp corner of the entity, the font is Song: ► ▲▼

Here is the solid sharp corner, the font is Arial: ► ▲▼

Here is the entity sharp corner, the font is Lucida Sans Unicode: ► ▲ ►

Here is the solid sharp corner, the font is Times New Roman: ► ▲ ►

Here is the solid sharp corner, the font is Verdana: ► ▲ ►

This is a solid circle. Due to its limited size, it behaves like a hexagonal entity. The font is Song: ●

Here is a solid circle, which, due to its limited size, behaves like a hexagonal solid in Arial: ●

Here is a solid circle, due to its limited size, it behaves like a hexagonal entity in Lucida Sans Unicode: ●

Here is a solid circle, due to its limited size, it behaves like a hexagonal entity, and the font is Times New Roman: ●

Here is a solid circle, which, due to its limited size, behaves like a hexagonal entity in Verdana font: ●

Here is a hollow circle with the font: ○

Here is a hollow circle in Arial: ○

Here is a hollow circle in Lucida Sans Unicode: ○

Here is a hollow circle in Times New Roman: ○

Here is a hollow circle in Verdana: ○

Here is a quarter arc, font is Song:

Here's a quarter arc in Arial:

Here's a quarter arc in Lucida Sans Unicode:

Here's a quarter arc in Times New Roman:

Here's a quarter arc in Verdana:

Second, achieve a quarter of the solid circle

Fill the four corners with a solid quarter circle to achieve a rounded effect with background color.

● ● ● ●

CSS Code:

The code is as follows:

.quarter_round{display:inline-block; width:8px; height: 8px; overflow:hidden; font-family:'Song body';}.quarter_round span{display:inline-block; font-size:16px; line-height:1;}.quarter_round .lt{}.quarter_round .rt{margin-left:-7px;}.quarter_round .lb{margin-top:-6px;}.quarter_round .rb{margin:-6px 0 0 -7px;}

HTML Code:

The code is as follows:

●●●●

Third, to achieve a solid color background rounded rectangle

Fill the four corners with a solid quarter circle to achieve a rounded effect with background color.

●●●●

Fourth, the implementation of a solid color background with sharp corner indicators rounded rectangle

Fill the four corners with a solid quarter circle and add sharp corners to achieve a solid rounded rectangle with sharp corners.

▲●●●●

Fill the four corners with a solid quarter circle and add sharp corners to achieve a solid rounded rectangle with sharp corners.

V. To realize the double-border rounded rectangle effect with sharp corners for blog comments on Sina Weibo

Fill the four corners with a solid quarter circle, repeat once, 1 pixel offset. Add sharp corners, 2 pixels up and down offset, rectangular double label, achieve the final double border effect.

◆◆●●●●

Fill the four corners with a solid quarter circle, repeat once, 1 pixel offset. Add sharp corners, 2 pixels up and down offset, rectangular double label, achieve the final double border effect.

"Use characters instead of rounded corners method tutorial" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.