-webkit-input-placeholder

Placeholder text; placeholder text; placeholder text; placeholder text; placeholder text;

    input::-webkit-input-placeholder {
        color: #f00;
        font-size: 17px;
        opacity:.5;
        text-shadow: 0 0 2px;
    }
Copy the code

-webkit-text-stroke Refer to the link

This pseudo-class is the name of the text stroke meaning, and text-shadow has some similarities. Can be used to define the width and color of a text stroke, again using an example:

.stroke {
    color: red;
    font-size: 20px;
    -webkit-text-stroke: 1px #00f;
}
Copy the code

Stroke DEMO

-webkit-line-clamp Refer to the link

This third attribute is great because it limits the number of lines of text that can be displayed in a block element, which is most useful for the need to display only three lines and then click the arrow to expand everything. But it wants to be associated with other attributes (overflow, -webkit-box-orient, display: -webkit-box;) Use together to have the effect. The usage is as follows (demo from the reference link):

  overflow : hidden;
  
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
Copy the code

This is a DEMO that goes beyond three lines using… Representation: static: The object follows the normal flow. Attributes such as top, right, bottom, and left will not be applied. Relative: Objects follow the general flow and are offset by the top, right, bottom, and left attributes with reference to their position in the general flow without affecting any elements in the general flow. Absolute: The object is removed from the regular flow and is absolutely positioned using attributes such as top, right, bottom, and left. The offset position of the box does not affect any element in the regular flow and its margin does not fold with any other margin. Fixed: The object is removed from the regular stream. It uses top, right, bottom, left and other attributes to position the object with the window as the reference point. When the scroll bar appears, the object will not scroll with it. Center: The object moves out of the normal flow and uses properties such as top, right, bottom, and left to specify the position or size of the box. The box is centered vertically and horizontally in its containing container. The offset position of the box does not affect any element in the regular flow, and its margin does not fold with any other margin. (CSS3) Page: The position of the box is calculated according to absolute. A box in a paged media or region block is always the initial contain block, otherwise it depends on each absolute mode. (CSS3) sticky: The object follows the normal flow in normal time. It is like a combination of “relative” and “fixed”. When it is on the screen, it follows a regular flow and when it is rolled out of the screen, it behaves like “fixed”. This property represents the adsorption effect you see in reality. (CSS3) * CSS3 new attributes may have description errors and changes, only for reference, continuous update

### to be continued