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

This article will explain in detail about the commonly used css style, the editor thinks it is very practical, so share it for you to do a reference, I hope you can get something after reading this article.

First, set the font style of input's placeholder

Input::-webkit-input-placeholder {/ * Chrome/Opera/Safari * /

Color: red

}

Input::-moz-placeholder {/ * Firefox 19 + * /

Color: red

}

Input:-ms-input-placeholder {/ * IE 10 + * /

Color: red

}

Input:-moz-placeholder {/ * Firefox 18-* /

Color: red

}

Set the style when input is in focus

Input:focus {

Background-color: red

}

Unborder the input

Border: none

Outline: none

Hide or change the scroll bar style

The style of the main part of css * / / * defines the width, height and background of the scroll bar, and the width and height correspond to the size of the horizontal and vertical scroll bar * /

::-webkit-scrollbar {

Width: 10px; / * valid for vertical flow strip * /

Height: 10px; / * valid for horizontal flow bar * /

}

/ * define the track color, inner shadow and fillet of the scroll bar * /

::-webkit-scrollbar-track {

-webkit-box-shadow: inset 00 6px rgba (0penny 0penny 0penny .3)

Background-color: rosybrown

Border-radius: 3px

}

/ * define slider color, inner shadow and fillet * /

::-webkit-scrollbar-thumb {

Border-radius: 7px

-webkit-box-shadow: inset 00 6px rgba (0penny 0penny 0penny .3)

Background-color: # E8E8E8

}

/ * define the style of the buttons at both ends * /

::-webkit-scrollbar-button {

Background-color:cyan

}

/ * define the style at the confluence in the lower right corner * /

::-webkit-scrollbar-corner {

Background:khaki

}

Third, the text goes beyond hiding and shows ellipsis

Single line (must have width)

Width:200rpx

White-space: nowrap

Overflow: hidden

Text-overflow: ellipsis

Multiple Lin

Word-break: break-all

Display:-webkit-box

-webkit-line-clamp: 2

-webkit-box-orient: vertical

Overflow: hidden

4. Control the automatic line wrapping of elements in div

Word-wrap: break-word

Word-break:break-all

5. Draw triangles with pure css

Demo {

Width: 0

Height: 0

Border-width: 20px

Border-style: solid

Border-color: transparent transparent red transparent

}

6. Absolute positioning elements are centered (horizontal and vertical)

Emo {

Width: 200px

Height: 200px

Position: absolute

Left: 50%

Top: 50%

Transform: translate (- 50% Murray 50%)

Background-color: green

}

7. Merge the borders of the table

Table,tr,td {border: 1px solid # 333;}

Table {

Border-collapse: collapse

}

About "what are the commonly used css styles" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

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.