[Turn] Partial but practical CSS style

Reprint path: https://www.shejidaren.com/pian-men-de-css-style.html

The content of CSS dynamic effects looks good, prevents the author from deleting it, and will never see it again, so save it locally

 

::-Webkit-Input-Placeholder

The H5 placeholder attribute of input is  easy to use, but the text color cannot be changed directly, so the current solution is ::input-placeholderto change it with attributes.

Small Tips: The effect is better when used with the opacity attribute!

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

@Impor nested style sheet file

Use it to nest style sheet files in the style sheet again. For example, some component  CSS can be used, but this is not recommended because it may be missed when loading.

@import url("reset.css");
@import url("global.css");  
@import url("font.css");

Outline The current status line displayed when the Input element is clicked (outer glow)

This status line is used to prompt the user to indicate the current status, but because the effect is very beautiful, it is recommended to remove it or change the style by yourself

div { 
    outline: none; //The default status line of the mobile browser 
    // outline: 5px dotted red; style can also be set 
}

Contenteditable sets whether the Element is editable

<p contenteditable="true">Editable</p>

Webkit-Playsinline

Mobile video can be played on the page instead of full screen.

<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>

Position: Absolute, make Margin effective

Just set left:0, right:0. The reason is that both sides are 0 and there is no margin, and the element can get the distance and center it.

div {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

Use Clearfix to float clearly and solve the height collapse of the parent class.

.clearfix {
	zoom: 1;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }

User-Select prohibits users from selecting text

div {
    user-select: none; /* Standard syntax */
}

A highlight that appears in Element after clearing the phone Tap event

*{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

::-Webkit-Scrollbar-Thumb

You can modify the scroll bar style of Google, and it seems that safari can also

-Webkit-Appearance:none

1. To apply platform specific styling to an element that doesn’t have it by default
2. To remove platform specific styling to an element that does have it by default

Remove the default style of the browser, such as chrome's input default style

input, button, textarea, select {
	*font-size: 100%;
	-webkit-appearance:none;
}

CSS turns on hardware acceleration

http://www.cnblogs.com/rubylouvre/p/3471490.html

-webkit-transform: translateZ(0);

When using CSS Transforms or Animations, there may be a page flicker bug

-webkit-backface-visibility: hidden;

-Webkit-Touch-Callout prohibits long-press links and picture pop-up menus

-webkit-touch-callout: none;

Transform-Style: Preserve-3d allows elements to support 3d

div {
    -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}

Perspective

The existence of this attribute determines whether the element you see is 2d or 3d. Generally set on the parent class of the package element.

.div-box {
	perspective: 400px; 
}

Css realizes no line wrapping, automatic line wrapping, and forced line wrapping

//No line break 
white-space:nowrap; 

//Auto wrap 
word-wrap: break-word; 
word-break: normal; 

//Forced line 
break word-break:break-all;

Box-Sizing lets the width and height of the element include Border and Padding

{
    box-sizing: border-box;
}

Calc() Function, calculate attribute value

https://www.w3schools.com/cssref/func_calc.asp

div {
    width: calc(100% - 100px);
}

The above example is to let the width be 100% minus the value of 100px, which is very suitable in the project, and it must be compatible with IE9 and above.

Css3 Linear-Gradient linear gradient

The default starts at top, and the direction can also be customized.

div {
    linear-gradient(red, yellow)
}

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Commonly used selector: Nth-Child() Selector

The following code is to select the first child node under the parent class, the p element. It is recommended to learn the use of this style attribute, which is very practical.

p:nth-child(1) {
    ...
}