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

This article mainly explains "what are the common operations of Css". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the common operations of Css.

Common css style operations

Single-line text overflow concealment

Syntax: white-space: nowrap | pre | pre-wrap | pre-line | inherit

Nowrap: a single line of text does not wrap, and the text displays one line

Pre: leave white space (leave spaces when the browser is displayed)

Pre-wrap: keep the blank sequence and wrap normally

Pre-line: merges white space sequences, but retains newline characters

Inherit: inherits the value of the parent element white-space attribute

Syntax: text-overflow:clip | ellipsis | string

Clip: cropping text

Ellipsis: the form of ellipsis in place of cropped text

String: replaces cropped characters with defined characters (and supports Firefox)

Div {white-space: 'nowrap'; overflow: hidden; text-overflow: ellipsis;}

I am an old web front-end programmer who has been engaged in development for many years. I am currently resigning from my job to do my own private customized web front-end courses. At the beginning of this year, I spent a month sorting out a piece of practical information about web front-end learning that is most suitable for 2019. All kinds of frameworks are sorted out and sent to every front-end partner. If you want to get, you can follow me and send me private letters in the background: front-end, you can get it for free.

Multiline text overflow concealment

Syntax: display:-webkit-box to display the object as a flexible box model

Syntax:-webkit-line-clamp:number

-webkit-line-clamp: limits the number of lines in which a block element displays text (number)

Syntax:-webkit-box-orient:horizontal | vertical | inline-axis | block-axis

Sets or retrieves the arrangement of the child elements of the stretch box object:

Horizontal: boxes lay out their contents horizontally

Vertical: the box lays out its contents vertically

Inline-axis: the box shows its child elements along the inner axis

Block-axis: the box displays its child elements along the block axis

Div {overflow: hidden; text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

Achieve the effect of a triangle (up)

Transparent: indicates set to transparent

Border-right {width: 0; height: 0; border-right: 20px solid transparent; border-left: 20px solid transparent; border-bottom: 20px solid red;}

Css3 to achieve vertical centering

Syntax: display:flex,justify-content:center, align-items: center

Display:flex, set flexible layout display

Justify-content: center, setting child elements to center horizontally

Align-items: center, setting child elements to center vertically

Div {display: flex; justify-content: center; align-items: center;}

Css3 to achieve Shadow effect

Syntax: box-shadow: h-shadow v-shadow blur spread color inset

H-shadow: horizontal shadow position (required), negative values allowed

V-shadow: position of vertical shadow (required), negative values allowed

Blur: blur distance (optional)

Spread: shadow size (optional)

Color: shadow color (optional)

Inset: change the inner shadow from the outer shadow (at the beginning) (optional). The default is the outer shadow.

Div {box-shadow: 2px 2px 2px 2px # f00 inset;}

Realizing fillet effect with css3

Syntax: border-radius: number px; number is a number

Border-radius can set multiple values

One value: indicates that all four fillets are the same

Two values: the first is the upper right and lower left fillet, and the second is the lower right and upper left fillet

Three values: the first value is the value of the upper left fillet, the second value is the upper right and lower left fillet values, and the third value is the lower right value

Four values: the first value is the upper left fillet, the second is the upper right, the third is the lower right, and the fourth is the lower left fillet.

Div {border-radius: 30px; / * border-radius: 10px 30px*/ / * border-radius: 10px 20px 30px*/ / * border-radius: 10px 20px 30px 40px*/}

Realizing text effect with css3

Syntax: text-shadow: h-shadow v-shadow blur color

H-shadow: required. The position of the horizontal shadow. Allow negative values

V-shadow: required. The position of the vertical shadow. Allow negative values

Blur: optional. Blurred distance

Color: optional. Shadow Color

Div {text-shadow: 2px 2px 2px # F00;}

Css pseudo-class first-letter

Syntax: first-letter means to add a special style to the first character of paragraph text

Div:first-letter {font-size: 50px; color:#f00;.}

Css pseudo-class first-line

Syntax: first-line means to add a special style to the first line of the text

Div:first-line {font-size: 50px; color:#f00;.}

Css transparent across browsers

Compatible with IE8 and below

Div {width: 200px; height: 200px; background: # 00B7FF; opacity: 0.5; / * Standard browser * / filter: alpha (opacity=50); / * IE lower version 8 requests /}

Css3 picture cropping

Syntax: object-fit: contain | cover | fill | none | scale-down

Contain: scale the content to maintain its aspect ratio

Cover: fills the entire content box to maintain the content aspect ratio. If the aspect ratio of the object does not match the content box, the object will be cropped to fit the content width.

Fill: fills the entire content box (default) without maintaining the original scale

None: keep the width and height of the picture unchanged

Scale-down: when the actual width and height of the picture is less than the set width and height, the display effect is the same as that of none; otherwise, the display effect is the same as that of contain.

Div img {width:100%; height:100%; object-fit: cover;}

Set the color of the input placeholder

Div::-webkit-input-placeholder {color: # 999} div:-moz-placeholder {color: # 999} div::-moz-placeholder {color: # 999} div:-ms-input-placeholder {color: # 999}

Blur filter effect

Syntax: filter:blur () | brightness () | contrast () | drop-shadow () | grayscale () | hue-rotate () | invert () | opacity () | saturate () | sepia () | url ()

Blur (px): sets Gaussian blur, using px as a unit

Brightness (%): sets the shading of the image, using% as the unit. The higher the value, the brighter the image.

Contrast (%): adjust the contrast of the image.

Drop-shadow (h-shadow v-shadow blur spread color): set a shadow effect to the image, refer to box-shadow

Grayscale (%): converts an image to a grayscale image, using% as units

Hue-rotate (deg): applies hue rotation to the image, using deg as a unit

Invert (%): set to reverse the input image, with a value of 0-100%

Opacity (0. 5): sets transparency, with a value of 0-1

Saturate (%): sets image saturation

Sepia (%): converts the image to dark brown with a value of 0-100%

Url (): the URL function accepts a XML file that sets a SVG filter and can contain an anchor to specify a specific filter element.

Div {filter: blur (1px);}

At this point, I believe you have a deeper understanding of "what are the common operations of Css?" you might as well come to the actual operation! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.