Record commonly used CSS3 in work, record commonly used CSS3

Record commonly used CSS3 in work, record commonly used CSS3

1. Border rounded corner and border shadow

Border-radius: 6px; // border-radius: 50%; // circle box-shadow: 1px 1px #666; // box-shadow: h-shadow v-shadow blur spread color inset (outset );

2. Size of the background image

Background-size: 100% 100%; // stretch the background image so that it can be filled with the content area. // background-size: 50px 100px; // stretch the background image, fill it with the content area

3. Text Effect

Text-shadow: 5px 5px 5px # FF0000; // specifies the text horizontal shadow, vertical shadow, fuzzy distance, and shadow color word-wrap: break-word; // allow long words to wrap to the next line of text-overflow: ellipsis; // display the omitted characters to represent the trimmed text with white-space: nowrap; overflow: hidden; Use

4. The font @ font-face is rarely used. After all, the introduction of font files is relatively large, and the loss is worth the candle. (Do not use it unless necessary)

5. Element 2D --- move, rotate, zoom in/out, flip; 3D---X axis rotation, Y axis rotation

Transform: translate (50px, 100px); // move left toptransform: rotate (30deg) from its current position; // rotate the given angle clockwise (negative value allowed -- clockwise rotation ). Transform: scale (2, 4); // The size will increase or decrease according to the given width (X axis) and height (Y axis) parameters transform: skew (30deg, 20deg ); // flip the given Angle Based on the given horizontal line (X axis) and vertical line (Y axis) parameters transform: matrix (0.866, 0.5,-0.5, 0.866 ); // combine all 2D conversion methods transform: rotateX (120deg); // rotate transform: rotateY (130deg) around its X axis at a given degree ); // rotate around the given degree of the Y axis-ms-transform:;/* IE 9 */-webkit-transform :; /* Safari and Chrome */-o-transform:;/* Opera */-moz-transform:;/* Firefox */

6. transition

Div {width: 100px; height: 100px; background: yellow; transition: width 2 s linear 2 s, height 2 s linear 2 s, transform 2 s linear 2 s; // generally used with hover-moz-transition: width 2 s linear 2 s, height 2 s linear 2 s,-moz-transform 2 s linear 2 s; /* Firefox 4 */-webkit-transition: width 2 s linear 2 s, height 2 s linear 2 s,-webkit-transform 2 s linear 2 s; /* Safari and Chrome */-o-transition: width 2 s linear 2 s, height 2 s linear 2 s,-o-transform 2 s linear 2 s; /* Opera */} div: hover {width: 200px; height: 200px; transform: rotate (180deg);-moz-transform: rotate (180deg ); /* Firefox 4 */-webkit-transform: rotate (180deg);/* Safari and Chrome */-o-transform: rotate (180deg);/* Opera */}

7. animation @ keyframes and animation -- Example (custom cursor animation in the input box)

.custom-cursor {    width: 2px;    height: 45px;    background-color: #2F323A;    position: absolute;    top: 32px;    right: 20px;    animation: cursor 1s linear infinite;    -webkit-animation: cursor 1s linear infinite;    -moz-animation: cursor 1s linear infinite;    -o-animation: cursor 1s linear infinite;}@keyframes cursor {    0% {        opacity: 0    }    50% {        opacity: 0    }    50.1% {        opacity: 1    }    100% {        opacity: 1    }}@-webkit-keyframes cursor {    0% {        opacity: 0    }    50% {        opacity: 0    }    50.1% {        opacity: 1    }    100% {        opacity: 1    }}@-moz-keyframes cursor {    0% {        opacity: 0    }    50% {        opacity: 0    }    50.1% {        opacity: 1    }    100% {        opacity: 1    }}@-o-keyframes cursor {    0% {        opacity: 0    }    50% {        opacity: 0    }    50.1% {        opacity: 1    }    100% {        opacity: 1    }}

8. box-sizing: border-box -------- the border and padding values are calculated in width, which is actually a weird mode,

After border-box is set, the two width = 50% sides are not misplaced when the border is added,

It is mainly used for typographical analysis. In many cases, it is very practical and simplifies the problem of computing location.

box-sizing:border-box;   -moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float: left;