Step by step let you 55 necessary fragments to improve the efficiency of CSS development

Keywords: Programming IE Mobile Firefox github

Thank you for your reference- http://bjbsair.com/2020-04-01/tech-info/18398.html

This article will record the CSS fragments that we usually use. Using these CSS can help us solve many practical project problems. It's suggested to like the collection of wall cracks for later reference

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Clear floating

It's needless to say that we will avoid the trouble caused by floating in many ways. I think the most convenient and compatible one is to create another < div style = "clear: both;" > under the same level directory, but this will increase a lot of useless code. At this time, we use the pseudo element: after to solve the problem of floating. If there is a floating element in the current level, then add the clearfix class to its parent.

// Clear floating  
.clearfix:after {  
  content: "\00A0";  
  display: block;  
  visibility: hidden;  
  width: 0;  
  height: 0;  
  clear: both;  
  font-size: 0;  
  line-height: 0;  
  overflow: hidden;  
}  
.clearfix {  
  zoom: 1;  
}

Vertical horizontal center

In the world of css, horizontal centring is simpler than vertical centring. After years of evolution, there is still no good way to make elements vertically centring (each way has its own advantages and disadvantages, but it cannot achieve the goal of good compatibility and less destructive force). Here are several common ways to achieve this

Absolute positioning mode and known width and height

position: absolute;  
top: 50%;  
left: 50%;  
margin-top: -3em;  
margin-left: -7em;  
width: 14em;  
height: 6em;

Absolute positioning + unknown width and height + translate

position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
//Browser prefix required

flex easy horizontal vertical center (unknown width and height)

display: flex;  
align-items: center;  
justify-content: center;

Ellipsis at the end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width, suitable for single line display

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

Variable width, suitable for multi line and mobile display

overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 3;  
-webkit-box-orient: vertical;

Fuzzy effect of manufacturing text

We can do this when we want to create a fuzzy effect on the text

color: transparent;  
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Simple loading effect with animation

Let's implement a very simple loading effect

.loading:after {  
  display: inline-block;  
  overflow: hidden;  
  vertical-align: bottom;  
  content: "\2026";  
  -webkit-animation: ellipsis 2s infinite;  
}  
  
// Animation part  
@-webkit-keyframes ellipsis {  
  from {  
    width: 2px;  
  }  
  to {  
    width: 15px;  
  }  
}

Custom text selection style

By default, when we select the text on the web page, we will give the selected part a dark blue background color (you can pick up the mouse and try). What if we want to customize the style of the selected part?

// Note that you can only modify these two attributes font color select background color  
  
element::selection {  
  color: green;  
  background-color: pink;  
}  
element::-moz-selection {  
  color: green;  
  background-color: pink;  
}

Top corner sticker effect

Sometimes we have such a demand. In a list display page, if some list items are newly added or have high popularity, it will be required to add a sticker effect on them, just like the effect of fork me on github of the default hexo blog.

Now let's go step by step to finish the leftmost effect

html

<div class="wrap">  
  <div class="ribbon">  
    <a href="#">Fork me on GitHub</a>  
  </div>  
</div>

css

/* Several settings of outer container  */  
.wrap {  
  width: 160px;  
  height: 160px;  
  overflow: hidden;  
  position: relative;  
  background-color: #f3f3f3;  
}  
  
.ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  position: absolute;  
  /* shadom */  
  -webkit-box-shadow: 0 0 10px #888;  
  -moz-box-shadow: 0 0 10px #888;  
  box-shadow: 0 0 10px #888;  
  /* rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* position */  
  left: -50px;  
  top: 40px;  
}  
  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* shadow */  
  text-shadow: 0 0 5px #444;  
}

input placeholder

When we set the placeholder property for some input types, sometimes we need to change the default style.

input::-webkit-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-moz-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-ms-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}

Mobile terminal can click the default border where the element goes

On mobile browsers, when you click a link or a clickable element defined by Javascript, a blue border will appear. To be honest, it's disgusting. How to remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

To achieve the effect similar to the drop cap in word, you can use the following code

element:first-letter {  
  float: left;  
  color: green;  
  font-size: 30px;  
}

Mistress triangle

We can use small triangles in many places. Next, let's draw triangles in four directions

.triangle {  
  /* Basic style */  
  border: solid 10px transparent;  
}  
/*lower*/  
.triangle.bottom {  
  border-top-color: green;  
}  
/*upper*/  
.triangle.top {  
  border-bottom-color: green;  
}  
/*Left*/  
.triangle.top {  
  border-right-color: green;  
}  
/*right*/  
.triangle.top {  
  border-left-color: green;  
}

It can be seen that drawing a small triangle is very simple, as long as two lines of style can be done, as long as you want to draw which direction for the direction, you can set the opposite style property

Mouse hand type

In general, we want to add a mouse hand shape to the following elements

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],  
input[type="submit"],  
input[type="image"],  
input[type="button"],  
label[for],  
select,  
button {  
  cursor: pointer;  
}

Shielding the highlight effect of elements in Webkit mobile browser

When visiting the mobile website, you will find some gray boxes around the selected elements. Use the following code to block this style

-webkit-touch-callout: none;  
-webkit-user-select: none;  
-khtml-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;

Remove the default margin and padding for browsers with common tags

pre,code,legend,fieldset,blockquote … Etc. tags are not very common, so they are not listed one by one. If they are used in the project, you can write them separately

body,  
p,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
dl,  
dd,  
ul,  
ol,  
th,  
td,  
button,  
figure,  
input,  
textarea,  
form {  
  margin: 0;  
  padding: 0;  
}

Unified input, select, textarea width

The width of box models of input, select and textarea in different browsers is calculated differently, and they are unified into the most common content box

input,  
select,  
textarea {  
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;  
  box-sizing: content-box;  
}  
  
table {  
  /*table The distance between borders of adjacent cells is set to 0*/  
  border-spacing: 0;  
  /*By default, setting border to tr has no effect. If table has set border to merge mode: "border collapse: collapse;", it is OK*/  
  border-collapse: collapse;  
}

Remove the default border of some browser elements

acronym,fieldset … If other tags are not very common, they will not be listed one by one; if they are used in the project, they can be written separately

img,  
input,  
button,  
textarea {  
  border: none;  
  -webkit-appearance: none;  
}  
  
input {  
  /*Because input does not inherit the centering style of the parent element by default, set "text align: inherit"*/  
  text-align: inherit;  
}  
  
textarea {  
  /*textarea No zoom by default*/  
  resize: none;  
}

Cancel element outline style

Because some properties of the following elements do not inherit the parent node style, these properties of these elements are declared as properties of the parent element

a,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
input,  
select,  
button,  
option,  
textarea,  
optgroup {  
  font-family: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  line-height: inherit;  
  color: inherit;  
  outline: none;  
}

Remove the default text decoration for hyperlink elements

In addition, the dash and underline of del and ins labels are still very good, so they will not be removed

a {  
  text-decoration: none;  
}  
  
ol,  
ul {  
  /*In development, the list of UI design is too different from the original style, so the default list style of ol and ul is cancelled directly*/  
  list-style: none;  
}  
  
button,  
input[type="submit"],  
input[type="button"] {  
  /*The mouse is in the shape of "small hand", indicating that it can be clicked*/  
  cursor: pointer;  
}  
  
input::-moz-focus-inner {  
  /*The default "padding, border" when the input focus of some versions of Firefox is canceled*/  
  padding: 0;  
  border: 0;  
}

Cancel the action button of some browser digital input controls

input[type="number"] {  
  -moz-appearance: textfield;  
}  
  
input[type="number"]::-webkit-inner-spin-button,  
input[type="number"]::-webkit-outer-spin-button {  
  margin: 0;  
  -webkit-appearance: none;  
}

Enter the color setting of the control placeholder

input::-webkit-input-placeholder,  
textarea::-webkit-input-placeholder {  
  color: #999;  
}  
  
input:-moz-placeholder,  
textarea:-moz-placeholder {  
  color: #999;  
}  
  
input::-moz-placeholder,  
textarea::-moz-placeholder {  
  color: #999;  
}  
  
input:-ms-input-placeholder,  
textarea:-ms-input-placeholder {  
  color: #999;  
}  
  
template {  
  /*Because some browsing template s will be displayed, you need to hide*/  
  display: none;  
}

Position: short for fixed

.pf {  
  position: fixed;  
  /*chrome Kernel browser position: fixed to prevent jitter*/  
  -webkit-transform: translateZ(0);  
}

Use the principle of absolute positioning, width and height lifting, and center the element

.middle {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  margin: auto;  
}

Centering elements vertically with relative positioning in CSS3

.v-middle {  
  position: relative;  
  top: 50%;  
  -webkit-transform: -webkit-translateY(-50%);  
  -moz-transform: -moz-translateY(-50%);  
  -o-transform: -o-translateY(-50%);  
  transform: translateY(-50%);  
}

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

.bb {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

Single line text overflow display ellipsis "to = = > text overflow"

.to {  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

Initialize style

Different browsers have different default styles for each label. Sometimes we don't want to use the default style given by the browser. We can use reset.css to remove the default style

body,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
hr,  
p,  
blockquote,  
dl,  
dt,  
dd,  
ul,  
ol,  
li,  
pre,  
form,  
fieldset,  
legend,  
button,  
input,  
textarea,  
th,  
td {  
  margin: 0;  
  padding: 0;  
}  
body,  
button,  
input,  
select,  
textarea {  
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;  
}  
h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
  font-size: 100%;  
}  
address,  
cite,  
dfn,  
em,  
var {  
  font-style: normal;  
}  
code,  
kbd,  
pre,  
samp {  
  font-family: couriernew, courier, monospace;  
}  
small {  
  font-size: 12px;  
}  
ul,  
ol {  
  list-style: none;  
}  
a {  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
sup {  
  vertical-align: text-top;  
}  
sub {  
  vertical-align: text-bottom;  
}  
legend {  
  color: #000;  
}  
fieldset,  
img {  
  border: 0;  
}  
button,  
input,  
select,  
textarea {  
  font-size: 100%;  
}  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}

Force wrap / Auto wrap / force no wrap

/* Force no wrapping */  
div {  
  white-space: nowrap;  
}  
  
/* Automatic line feed */  
div {  
  word-wrap: break-word;  
  word-break: normal;  
}  
  
/* Force English word break */  
div {  
  word-break: break-all;  
}

Style of table boundary

table {  
  border: 1px solid #000;  
  padding: 0;  
  border-collapse: collapse;  
  table-layout: fixed;  
  margin-top: 10px;  
}  
table td {  
  height: 30px;  
  border: 1px solid #000;  
  background: #fff;  
  font-size: 15px;  
  padding: 3px 3px 3px 8px;  
  color: #000;  
  width: 160px;  
}

Absolute positioning and margin

When we know in advance the length and width of the element to be centered, we can use this method:

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  width: 160px;  
  height: 100px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-left: -80px; /* Half the width */  
  margin-top: -50px; /* Half the height */  
}

Absolute positioning and transform

When the elements to be centered are variable in width and height, we can use transform to offset the elements.

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);  
  text-align: center;  
}

line-height

Line height is actually row height. We can adjust the layout with row height!

However, there is a big disadvantage of this scheme: the copy must be single line, and if there are multiple lines, there will be problems with the set line height.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  line-height: 200px;  
}

table layout

Set display: table for the container element and display: table cell for the current element:

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: table;  
}  
.content {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center;  
}

flex layout

We can set the parent element to display: flex, and use the align items and justify content in flex to set the center of the vertical and horizontal directions. In this way, the width and height of the intermediate elements are not limited.

At the same time, the flex layout can also replace the problem that the line height scheme is not centered in some Android models.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
.content {  
  background-color: #ccc;  
  text-align: center;  
}

Picture top bottom left right center

One common way is to set the div of the outer layer to table cell; then center the inner elements up, down, left and right. Of course, there is also a way to set img as a div and refer to the code in 6. CSS code is as follows:

.content {  
  width: 400px;  
  height: 400px;  
  border: 1px solid #ccc;  
  text-align: center;  
  display: table-cell;  
  vertical-align: middle;  
}

The html code is as follows:

<div class="content">  
  <img src="./4.jpg" alt="img" />  
</div>

Small bars on both sides of the title

We often encounter such UI requirements, that is, there are two small horizontal posts on both sides of the title. How was it implemented before? For example, use a border top attribute, and then absolutely locate the middle text. At the same time, give the text a background color, and cover the middle part.

Now we can use pseudo elements!

<div class="title">Title</div>

title {  
  color: #e1767c;  
  font-size: 0.3rem;  
  position: relative;  
  
  &:before,  
  &:after {  
    content: "";  
    position: absolute;  
    display: block;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate3d(-50%, -50%, 0);  
    transform: translate3d(-50%, -50%, 0);  
    border-top: 0.02rem solid #e1767c;  
    width: 0.4rem;  
  }  
  &:before {  
    margin-left: -1.2rem;  
  }  
  &:after {  
    margin-left: 1.2rem;  
  }  
}

Drawing elements with border attribute

In addition to being a simple drawing border, border can also draw arbitrary polygons such as triangles, trapezoids and stars. The following are two triangles and trapezoids drawn

<div class="triangle1"></div>  
<div class="triangle2"></div>  
<div class="trapezoid"></div>

.triangle1 {  
  /*Acute triangle*/  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 100px solid #249ff1;  
  border-left: 30px solid transparent;  
  border-right: 100px solid transparent;  
}  
.triangle2 {  
  /*right triangle*/  
  width: 0;  
  height: 0;  
  border-top: 80px solid transparent;  
  border-bottom: 80px solid #ff5b01;  
  border-left: 50px solid #ff5b01;  
  border-right: 50px solid transparent;  
}  
.trapezoid {  
  /*Trapezoid*/  
  width: 0;  
  height: 0;  
  border-top: none;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #13dbed;  
  border-left: 80px solid #13dbed;  
}

Drawing elements with border radius

Border radius is mainly used to draw the shapes of dots, circles, ellipses, rounded rectangles and so on. Here are two simple drawings.

<div class="circle"></div>  
<div class="ellipse"><div></div></div>

.circle,  
.ellipse {  
  width: 100px;  
  height: 100px;  
  background: #249ff1;  
  border-radius: 50%;  
}  
.ellipse {  
  width: 150px;  
  background: #ff9e01;  
}

But the border radius attribute can actually set up to 8 values, and many unexpected images can be obtained by changing 8 values

Drawing elements with box shadow

For box shadow, its complete declaration is box shadow: h-shadow v-shadow blur spread color inset. The meanings of each value are: s offset in horizontal direction, cheap in vertical direction, blur distance (feathering value), shadow size (shadow and body size are the same when it is not set or 0), shadow color and whether to use inner shadow. In practical application, 3-6 values can be received, corresponding to the following:

Three values: h-shadow v-shadow color
Four values: h-shadow v-shadow blur color
5 values: h-shadow v-shadow blur spread color
6 values: h-shadow v-shadow blur spread color inset

At the same time, border shadow accepts comma separated values composed of more than one value. Through this feature, we can achieve the effect of multiple borders. Below we use this attribute to implement a single label without the aid of pseudo element's add Icon and the icon representing the target.

<div class="plus"></div>  
<div class="target"></div>

.plus {  
  width: 30px;  
  height: 30px;  
  margin-left: 50px; /*Because box shadow does not occupy space, it is often necessary to add margin to correct the position*/  
  background: #000;  
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;  
}  
.target {  
  width: 30px;  
  height: 30px;  
  background: red;  
  border-radius: 50%;  
  margin-left: 50px;  
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;  
}

Using CSS gradients to draw icons

The gradient property of CSS3 is very powerful. In theory, any graph can be drawn by gradient. The characteristics and use of gradient are enough to write a long article. Here is an example

<div class="gradient"></div>

.gradient {  
  position: relative;  
  width: 300px;  
  height: 300px;  
  border-radius: 50%;  
  background-color: silver;  
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),  
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(  
      335deg,  
      #b00 23px,  
      transparent 23px  
    ), linear-gradient(155deg, #d00 23px, transparent 23px);  
  background-size: 58px 58px;  
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;  
}

glass

.cup {  
  display: inline-block;  
  width: 0.9em;  
  height: 0.4em;  
  border: 0.25em solid;  
  border-bottom: 1.1em solid;  
  border-radius: 0 0 0.25em 0.25em;  
}  
cup:before {  
  position: absolute;  
  right: -0.6em;  
  top: 0;  
  width: 0.3em;  
  height: 0.8em;  
  border: 0.25em solid;  
  border-left: none;  
  border-radius: 0 0.25em 0.25em 0;  
  content: "";  
}

heart-shaped

.heart {  
  display: inline-block;  
  margin-top: 1.5em;  
  width: 50px;  
  height: 50px;  
  background: green;  
}  
.heart:before,  
.heart:after {  
  position: absolute;  
  width: 1em;  
  height: 1.6em;  
  background: #000;  
  border-radius: 50% 50% 0 0;  
  content: "";  
  bottom: 0;  
}  
.heart:before {  
  -webkit-transform: rotate(45deg);  
  -webkit-transform-origin: 100% 100%;  
  right: 0;  
  background: red;  
  opacity: 0.5;  
  z-index: 5;  
}  
.:after {  
  -webkit-transform: rotate(-45deg);  
  -webkit-transform-origin: 0 100%;  
  left: 0;  
  opacity: 0.8;  
}

camera

.camera {  
  display: inline-block;  
  border-style: solid;  
  border-width: 0.65em 0.9em;  
  border-radius: 0.1em;  
}  
.camera:before {  
  position: absolute;  
  top: -0.3em;  
  left: -0.3em;  
  width: 0.4em;  
  height: 0.4em;  
  border-radius: 50%;  
  border: 0.1em solid #fff;  
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;  
  content: "";  
}  
.camera:after {  
  position: absolute;  
  top: -0.5em;  
  left: 0.5em;  
  width: 0.2em;  
  border-top: 0.125em solid #fff;  
  content: "";  
}

Moon

.moon {  
  display: inline-block;  
  height: 1.5em;  
  width: 1.5em;  
  box-shadow: inset -0.4em 0 0;  
  border-radius: 2em;  
  transform: rotate(20deg);  
}

Floating class

General float list float image float

.float-left {  
  float: left;  
}  
.float-right {  
  float: right;  
}  
.float-li li,/*Defined on li parent element or ancestor element*/ li.float-li {  
  float: left;  
}  
.float-img img,/*Defined on img parent element or ancestor element*/ img.float-li {  
  float: left;  
}  
.float-span span,/*Defined on span parent element or ancestor element*/ span.float-span {  
  float: right;  
}

Background image embedding and positioning

.bg-img {  
  background-image: url("../img/bg.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg01-img {  
  background-image: url("../img/bg01.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg02-img {  
  background-image: url("../img/bg02.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg03-img {  
  background-image: url("../img/bg03.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg04-img {  
  background-image: url("../img/bg04.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}

Inheritance class

.inherit-width {  
  width: inherit;  
}  
.inherit-min-width {  
  min-width: inherit;  
}  
.inherit-height {  
  height: inherit;  
}  
.inherit-min-height {  
  min-height: inherit;  
}  
.inherit-color {  
  color: inherit;  
}

Text indentation

.text-indent {  
  text-indent: 2rem;  
}  
/*16px*/  
.text-indent-xs {  
  text-indent: 1.5rem;  
}  
/*12px*/  
.text-indent-sm {  
  text-indent: 1.7rem;  
}  
/*14px*/  
.text-indent-md {  
  text-indent: 2rem;  
}  
/*18px*/  
.text-indent-lg {  
  text-indent: 2.4rem;  
}  
/*20px*/

Row height

.line-height-xs {  
  line-height: 1.3rem;  
}  
.line-height-sm {  
  line-height: 1.5rem;  
}  
.line-height-md {  
  line-height: 1.7rem;  
}  
.line-height-lg {  
  line-height: 2rem;  
}  
  
.line-height-25x {  
  line-height: 25px;  
}  
.line-height-30x {  
  line-height: 30px;  
}

ul indentation

.ul-indent-xs {  
  margin-left: 0.5rem;  
}  
.ul-indent-sm {  
  margin-left: 1rem;  
}  
.ul-indent-md {  
  margin-left: 1.5rem;  
}  
.ul-indent-lg {  
  margin-left: 2rem;  
}  
.ol-list,  
.ul-list {  
  list-style: disc;  
}

Text truncation

.truncate {  
  max-width: 100%;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  
.hide {  
  display: none;  
}

Picture and video specifications

.img-max,  
.video-max {  
  width: 100%;  
  height: auto;  
}  
/*display Display mode*/  
.inline {  
  display: inline;  
}  
.inline-block {  
  display: inline-block;  
}  
.block {  
  display: block;  
}

Border style

.border-xs-black {  
  border: 1px solid #000;  
}  
.border-sm-black {  
  border: 2px solid #000;  
}  
.border-md-black {  
  border: 3px solid #000;  
}  
.border-lg-black {  
  border: 5px solid #000;  
}  
  
.border-xs-gray {  
  border: 1px solid #9c9c9c;  
}  
.border-sm-gray {  
  border: 2px solid #9c9c9c;  
}  
.border-md-gray {  
  border: 3px solid #9c9c9c;  
}  
.border-lg-gray {  
  border: 5px solid #9c9c9c;  
}

background color

.bg-white {  
  background: #fff !important;  
}  
.bg-black {  
  background: #1b1c1d !important;  
}  
.bg-gray {  
  background: #767676 !important;  
}  
.bg-light-gray {  
  background: #f8f7f7 !important;  
}  
.bg-yellow {  
  background: #fbbd08 !important;  
}  
.bg-orange {  
  background: #f2711c !important;  
}  
.bg-red {  
  background: #db2828 !important;  
}  
.bg-olive {  
  background: #b5cc18 !important;  
}  
.bg-green {  
  background: #21ba45 !important;  
}  
.bg-teal {  
  background: #00b5ad !important;  
}  
.bg-darkGreen {  
  background: #19a97b !important;  
}  
.bg-threeGreen {  
  background: #097c25 !important;  
}  
.bg-blue {  
  background: #2185d0 !important;  
}  
.bg-violet {  
  background: #6435c9 !important;  
}  
.bg-purple {  
  background: #a333c8 !important;  
}  
.bg-brown {  
  background: #a5673f !important;  
}

Divider presets

hr,  
.hr-xs-Silver,  
.hr-sm-black,  
.hr-sm-Silver,  
.hr-xs-gray,  
.hr-sm-gray {  
  margin: 20px 0;  
}  
hr {  
  border: none;  
  border-top: 1px solid #000;  
}  
.hr-xs-Silver {  
  border: none;  
  border-top: 1px solid #c0c0c0;  
}  
.hr-sm-black {  
  border: none;  
  border-top: 2px solid #000;  
}  
.hr-sm-Silver {  
  border: none;  
  border-top: 2px solid #c0c0c0;  
}  
.hr-xs-gray {  
  border: none;  
  border-top: 1px solid #767676;  
}  
.hr-sm-gray {  
  border: none;  
  border-top: 2px solid #767676;  
}

hover effect of mouse a label

.hover-red a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-red:hover {  
  color: red;  
} /*Add the class name for the a tag separately*/  
.hover-yellow a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-yellow:hover {  
  color: #ffd700;  
} /*Add the class name for the a tag separately*/  
.hover-green a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-green:hover {  
  color: #70aa39;  
} /*Add the class name for the a tag separately*/  
.hover-blue a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-blue:hover {  
  color: blue;  
} /*Add the class name for the a tag separately*/  
.hover-gray a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-gray:hover {  
  color: #9c9c9c;  
} /*Add the class name for the a tag separately*/  
.underline a:hover,  
a.underline:hover {  
  text-decoration: underline;  
}

Shadow effect

.shadow-text-xs {  
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);  
} /*Intelligent compatible ie10 or above is not considered temporarily*/  
  
.shadow-xs {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */  
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */  
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */  
}  
.shadow-sm {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */  
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */  
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */  
}  
.shadow-md {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */  
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */  
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */  
}  
.shadow-lg {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */  
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */  
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */  
}

fillet

.border-radius-xs {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  
.border-radius-sm {  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-md {  
  -webkit-border-radius: 7px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-lg {  
  -webkit-border-radius: 9px;  
  -moz-border-radius: 9px;  
  border-radius: 9px;  
}

summary

If articles and notes can give you a little help or inspiration, please don't be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement Https://github.com/wskats/cv/issues/29 thank you for your reference - http://bjbsair.com/2020-04-01/tech-info/18398.html

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Clear floating

// Clear floating  
.clearfix:after {  
  content: "\00A0";  
  display: block;  
  visibility: hidden;  
  width: 0;  
  height: 0;  
  clear: both;  
  font-size: 0;  
  line-height: 0;  
  overflow: hidden;  
}  
.clearfix {  
  zoom: 1;  
}

Vertical horizontal center

Absolute positioning mode and known width and height

position: absolute;  
top: 50%;  
left: 50%;  
margin-top: -3em;  
margin-left: -7em;  
width: 14em;  
height: 6em;

Absolute positioning + unknown width and height + translate

position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
//Browser prefix required

flex easy horizontal vertical center (unknown width and height)

display: flex;  
align-items: center;  
justify-content: center;

Ellipsis at the end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width, suitable for single line display

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

Variable width, suitable for multi line and mobile display

overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 3;  
-webkit-box-orient: vertical;

Fuzzy effect of manufacturing text

We can do this when we want to create a fuzzy effect on the text

color: transparent;  
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Simple loading effect with animation

Let's implement a very simple loading effect

.loading:after {  
  display: inline-block;  
  overflow: hidden;  
  vertical-align: bottom;  
  content: "\2026";  
  -webkit-animation: ellipsis 2s infinite;  
}  
  
// Animation part  
@-webkit-keyframes ellipsis {  
  from {  
    width: 2px;  
  }  
  to {  
    width: 15px;  
  }  
}

Custom text selection style

// Note that you can only modify these two attributes font color select background color  
  
element::selection {  
  color: green;  
  background-color: pink;  
}  
element::-moz-selection {  
  color: green;  
  background-color: pink;  
}

Top corner sticker effect

Now let's go step by step to finish the leftmost effect

html

<div class="wrap">  
  <div class="ribbon">  
    <a href="#">Fork me on GitHub</a>  
  </div>  
</div>

css

/* Several settings of outer container  */  
.wrap {  
  width: 160px;  
  height: 160px;  
  overflow: hidden;  
  position: relative;  
  background-color: #f3f3f3;  
}  
  
.ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  position: absolute;  
  /* shadom */  
  -webkit-box-shadow: 0 0 10px #888;  
  -moz-box-shadow: 0 0 10px #888;  
  box-shadow: 0 0 10px #888;  
  /* rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* position */  
  left: -50px;  
  top: 40px;  
}  
  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* shadow */  
  text-shadow: 0 0 5px #444;  
}

input placeholder

When we set the placeholder property for some input types, sometimes we need to change the default style.

input::-webkit-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-moz-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-ms-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}

Mobile terminal can click the default border where the element goes

On mobile browsers, when you click a link or a clickable element defined by Javascript, a blue border will appear. To be honest, it's disgusting. How to remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

To achieve the effect similar to the drop cap in word, you can use the following code

element:first-letter {  
  float: left;  
  color: green;  
  font-size: 30px;  
}

Mistress triangle

We can use small triangles in many places. Next, let's draw triangles in four directions

.triangle {  
  /* Basic style */  
  border: solid 10px transparent;  
}  
/*lower*/  
.triangle.bottom {  
  border-top-color: green;  
}  
/*upper*/  
.triangle.top {  
  border-bottom-color: green;  
}  
/*Left*/  
.triangle.top {  
  border-right-color: green;  
}  
/*right*/  
.triangle.top {  
  border-left-color: green;  
}

Mouse hand type

In general, we want to add a mouse hand shape to the following elements

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],  
input[type="submit"],  
input[type="image"],  
input[type="button"],  
label[for],  
select,  
button {  
  cursor: pointer;  
}

Shielding the highlight effect of elements in Webkit mobile browser

When visiting the mobile website, you will find some gray boxes around the selected elements. Use the following code to block this style

-webkit-touch-callout: none;  
-webkit-user-select: none;  
-khtml-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;

Remove the default margin and padding for browsers with common tags

pre,code,legend,fieldset,blockquote … Etc. tags are not very common, so they are not listed one by one. If they are used in the project, you can write them separately

body,  
p,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
dl,  
dd,  
ul,  
ol,  
th,  
td,  
button,  
figure,  
input,  
textarea,  
form {  
  margin: 0;  
  padding: 0;  
}

Unified input, select, textarea width

The width of box models of input, select and textarea in different browsers is calculated differently, and they are unified into the most common content box

input,  
select,  
textarea {  
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;  
  box-sizing: content-box;  
}  
  
table {  
  /*table The distance between borders of adjacent cells is set to 0*/  
  border-spacing: 0;  
  /*By default, setting border to tr has no effect. If table has set border to merge mode: "border collapse: collapse;", it is OK*/  
  border-collapse: collapse;  
}

Remove the default border of some browser elements

acronym,fieldset … If other tags are not very common, they will not be listed one by one; if they are used in the project, they can be written separately

img,  
input,  
button,  
textarea {  
  border: none;  
  -webkit-appearance: none;  
}  
  
input {  
  /*Because input does not inherit the centering style of the parent element by default, set "text align: inherit"*/  
  text-align: inherit;  
}  
  
textarea {  
  /*textarea No zoom by default*/  
  resize: none;  
}

Cancel element outline style

Because some properties of the following elements do not inherit the parent node style, these properties of these elements are declared as properties of the parent element

a,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
input,  
select,  
button,  
option,  
textarea,  
optgroup {  
  font-family: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  line-height: inherit;  
  color: inherit;  
  outline: none;  
}

Remove the default text decoration for hyperlink elements

In addition, the dash and underline of del and ins labels are still very good, so they will not be removed

a {  
  text-decoration: none;  
}  
  
ol,  
ul {  
  /*In development, the list of UI design is too different from the original style, so the default list style of ol and ul is cancelled directly*/  
  list-style: none;  
}  
  
button,  
input[type="submit"],  
input[type="button"] {  
  /*The mouse is in the shape of "small hand", indicating that it can be clicked*/  
  cursor: pointer;  
}  
  
input::-moz-focus-inner {  
  /*The default "padding, border" when the input focus of some versions of Firefox is canceled*/  
  padding: 0;  
  border: 0;  
}

Cancel the action button of some browser digital input controls

input[type="number"] {  
  -moz-appearance: textfield;  
}  
  
input[type="number"]::-webkit-inner-spin-button,  
input[type="number"]::-webkit-outer-spin-button {  
  margin: 0;  
  -webkit-appearance: none;  
}

Enter the color setting of the control placeholder

input::-webkit-input-placeholder,  
textarea::-webkit-input-placeholder {  
  color: #999;  
}  
  
input:-moz-placeholder,  
textarea:-moz-placeholder {  
  color: #999;  
}  
  
input::-moz-placeholder,  
textarea::-moz-placeholder {  
  color: #999;  
}  
  
input:-ms-input-placeholder,  
textarea:-ms-input-placeholder {  
  color: #999;  
}  
  
template {  
  /*Because some browsing template s will be displayed, you need to hide*/  
  display: none;  
}

Position: short for fixed

.pf {  
  position: fixed;  
  /*chrome Kernel browser position: fixed to prevent jitter*/  
  -webkit-transform: translateZ(0);  
}

Use the principle of absolute positioning, width and height lifting, and center the element

.middle {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  margin: auto;  
}

Centering elements vertically with relative positioning in CSS3

.v-middle {  
  position: relative;  
  top: 50%;  
  -webkit-transform: -webkit-translateY(-50%);  
  -moz-transform: -moz-translateY(-50%);  
  -o-transform: -o-translateY(-50%);  
  transform: translateY(-50%);  
}

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

.bb {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

Single line text overflow display ellipsis "to = = > text overflow"

.to {  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

Initialize style

Different browsers have different default styles for each label. Sometimes we don't want to use the default style given by the browser. We can use reset.css to remove the default style

body,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
hr,  
p,  
blockquote,  
dl,  
dt,  
dd,  
ul,  
ol,  
li,  
pre,  
form,  
fieldset,  
legend,  
button,  
input,  
textarea,  
th,  
td {  
  margin: 0;  
  padding: 0;  
}  
body,  
button,  
input,  
select,  
textarea {  
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;  
}  
h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
  font-size: 100%;  
}  
address,  
cite,  
dfn,  
em,  
var {  
  font-style: normal;  
}  
code,  
kbd,  
pre,  
samp {  
  font-family: couriernew, courier, monospace;  
}  
small {  
  font-size: 12px;  
}  
ul,  
ol {  
  list-style: none;  
}  
a {  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
sup {  
  vertical-align: text-top;  
}  
sub {  
  vertical-align: text-bottom;  
}  
legend {  
  color: #000;  
}  
fieldset,  
img {  
  border: 0;  
}  
button,  
input,  
select,  
textarea {  
  font-size: 100%;  
}  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}

Force wrap / Auto wrap / force no wrap

/* Force no wrapping */  
div {  
  white-space: nowrap;  
}  
  
/* Automatic line feed */  
div {  
  word-wrap: break-word;  
  word-break: normal;  
}  
  
/* Force English word break */  
div {  
  word-break: break-all;  
}

Style of table boundary

table {  
  border: 1px solid #000;  
  padding: 0;  
  border-collapse: collapse;  
  table-layout: fixed;  
  margin-top: 10px;  
}  
table td {  
  height: 30px;  
  border: 1px solid #000;  
  background: #fff;  
  font-size: 15px;  
  padding: 3px 3px 3px 8px;  
  color: #000;  
  width: 160px;  
}

Absolute positioning and margin

When we know in advance the length and width of the element to be centered, we can use this method:

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  width: 160px;  
  height: 100px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-left: -80px; /* Half the width */  
  margin-top: -50px; /* Half the height */  
}

Absolute positioning and transform

When the elements to be centered are variable in width and height, we can use transform to offset the elements.

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);  
  text-align: center;  
}

line-height

Line height is actually row height. We can adjust the layout with row height!

However, there is a big disadvantage of this scheme: the copy must be single line, and if there are multiple lines, there will be problems with the set line height.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  line-height: 200px;  
}

table layout

Set display: table for the container element and display: table cell for the current element:

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: table;  
}  
.content {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center;  
}

flex layout

At the same time, the flex layout can also replace the problem that the line height scheme is not centered in some Android models.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
.content {  
  background-color: #ccc;  
  text-align: center;  
}

Picture top bottom left right center

.content {  
  width: 400px;  
  height: 400px;  
  border: 1px solid #ccc;  
  text-align: center;  
  display: table-cell;  
  vertical-align: middle;  
}

The html code is as follows:

<div class="content">  
  <img src="./4.jpg" alt="img" />  
</div>

Small bars on both sides of the title

Now we can use pseudo elements!

<div class="title">Title</div>

title {  
  color: #e1767c;  
  font-size: 0.3rem;  
  position: relative;  
  
  &:before,  
  &:after {  
    content: "";  
    position: absolute;  
    display: block;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate3d(-50%, -50%, 0);  
    transform: translate3d(-50%, -50%, 0);  
    border-top: 0.02rem solid #e1767c;  
    width: 0.4rem;  
  }  
  &:before {  
    margin-left: -1.2rem;  
  }  
  &:after {  
    margin-left: 1.2rem;  
  }  
}

Drawing elements with border attribute

In addition to being a simple drawing border, border can also draw arbitrary polygons such as triangles, trapezoids and stars. The following are two triangles and trapezoids drawn

<div class="triangle1"></div>  
<div class="triangle2"></div>  
<div class="trapezoid"></div>

.triangle1 {  
  /*Acute triangle*/  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 100px solid #249ff1;  
  border-left: 30px solid transparent;  
  border-right: 100px solid transparent;  
}  
.triangle2 {  
  /*right triangle*/  
  width: 0;  
  height: 0;  
  border-top: 80px solid transparent;  
  border-bottom: 80px solid #ff5b01;  
  border-left: 50px solid #ff5b01;  
  border-right: 50px solid transparent;  
}  
.trapezoid {  
  /*Trapezoid*/  
  width: 0;  
  height: 0;  
  border-top: none;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #13dbed;  
  border-left: 80px solid #13dbed;  
}

Drawing elements with border radius

Border radius is mainly used to draw the shapes of dots, circles, ellipses, rounded rectangles and so on. Here are two simple drawings.

<div class="circle"></div>  
<div class="ellipse"><div></div></div>

.circle,  
.ellipse {  
  width: 100px;  
  height: 100px;  
  background: #249ff1;  
  border-radius: 50%;  
}  
.ellipse {  
  width: 150px;  
  background: #ff9e01;  
}

But the border radius attribute can actually set up to 8 values, and many unexpected images can be obtained by changing 8 values

Drawing elements with box shadow

Three values: h-shadow v-shadow color
Four values: h-shadow v-shadow blur color
5 values: h-shadow v-shadow blur spread color
6 values: h-shadow v-shadow blur spread color inset

<div class="plus"></div>  
<div class="target"></div>

.plus {  
  width: 30px;  
  height: 30px;  
  margin-left: 50px; /*Because box shadow does not occupy space, it is often necessary to add margin to correct the position*/  
  background: #000;  
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;  
}  
.target {  
  width: 30px;  
  height: 30px;  
  background: red;  
  border-radius: 50%;  
  margin-left: 50px;  
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;  
}

Using CSS gradients to draw icons

The gradient property of CSS3 is very powerful. In theory, any graph can be drawn by gradient. The characteristics and use of gradient are enough to write a long article. Here is an example

<div class="gradient"></div>

.gradient {  
  position: relative;  
  width: 300px;  
  height: 300px;  
  border-radius: 50%;  
  background-color: silver;  
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),  
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(  
      335deg,  
      #b00 23px,  
      transparent 23px  
    ), linear-gradient(155deg, #d00 23px, transparent 23px);  
  background-size: 58px 58px;  
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;  
}

glass

.cup {  
  display: inline-block;  
  width: 0.9em;  
  height: 0.4em;  
  border: 0.25em solid;  
  border-bottom: 1.1em solid;  
  border-radius: 0 0 0.25em 0.25em;  
}  
cup:before {  
  position: absolute;  
  right: -0.6em;  
  top: 0;  
  width: 0.3em;  
  height: 0.8em;  
  border: 0.25em solid;  
  border-left: none;  
  border-radius: 0 0.25em 0.25em 0;  
  content: "";  
}

heart-shaped

.heart {  
  display: inline-block;  
  margin-top: 1.5em;  
  width: 50px;  
  height: 50px;  
  background: green;  
}  
.heart:before,  
.heart:after {  
  position: absolute;  
  width: 1em;  
  height: 1.6em;  
  background: #000;  
  border-radius: 50% 50% 0 0;  
  content: "";  
  bottom: 0;  
}  
.heart:before {  
  -webkit-transform: rotate(45deg);  
  -webkit-transform-origin: 100% 100%;  
  right: 0;  
  background: red;  
  opacity: 0.5;  
  z-index: 5;  
}  
.:after {  
  -webkit-transform: rotate(-45deg);  
  -webkit-transform-origin: 0 100%;  
  left: 0;  
  opacity: 0.8;  
}

camera

.camera {  
  display: inline-block;  
  border-style: solid;  
  border-width: 0.65em 0.9em;  
  border-radius: 0.1em;  
}  
.camera:before {  
  position: absolute;  
  top: -0.3em;  
  left: -0.3em;  
  width: 0.4em;  
  height: 0.4em;  
  border-radius: 50%;  
  border: 0.1em solid #fff;  
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;  
  content: "";  
}  
.camera:after {  
  position: absolute;  
  top: -0.5em;  
  left: 0.5em;  
  width: 0.2em;  
  border-top: 0.125em solid #fff;  
  content: "";  
}

Moon

.moon {  
  display: inline-block;  
  height: 1.5em;  
  width: 1.5em;  
  box-shadow: inset -0.4em 0 0;  
  border-radius: 2em;  
  transform: rotate(20deg);  
}

Floating class

General float list float image float

.float-left {  
  float: left;  
}  
.float-right {  
  float: right;  
}  
.float-li li,/*Defined on li parent element or ancestor element*/ li.float-li {  
  float: left;  
}  
.float-img img,/*Defined on img parent element or ancestor element*/ img.float-li {  
  float: left;  
}  
.float-span span,/*Defined on span parent element or ancestor element*/ span.float-span {  
  float: right;  
}

Background image embedding and positioning

.bg-img {  
  background-image: url("../img/bg.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg01-img {  
  background-image: url("../img/bg01.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg02-img {  
  background-image: url("../img/bg02.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg03-img {  
  background-image: url("../img/bg03.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg04-img {  
  background-image: url("../img/bg04.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}

Inheritance class

.inherit-width {  
  width: inherit;  
}  
.inherit-min-width {  
  min-width: inherit;  
}  
.inherit-height {  
  height: inherit;  
}  
.inherit-min-height {  
  min-height: inherit;  
}  
.inherit-color {  
  color: inherit;  
}

Text indentation

.text-indent {  
  text-indent: 2rem;  
}  
/*16px*/  
.text-indent-xs {  
  text-indent: 1.5rem;  
}  
/*12px*/  
.text-indent-sm {  
  text-indent: 1.7rem;  
}  
/*14px*/  
.text-indent-md {  
  text-indent: 2rem;  
}  
/*18px*/  
.text-indent-lg {  
  text-indent: 2.4rem;  
}  
/*20px*/

Row height

.line-height-xs {  
  line-height: 1.3rem;  
}  
.line-height-sm {  
  line-height: 1.5rem;  
}  
.line-height-md {  
  line-height: 1.7rem;  
}  
.line-height-lg {  
  line-height: 2rem;  
}  
  
.line-height-25x {  
  line-height: 25px;  
}  
.line-height-30x {  
  line-height: 30px;  
}

ul indentation

.ul-indent-xs {  
  margin-left: 0.5rem;  
}  
.ul-indent-sm {  
  margin-left: 1rem;  
}  
.ul-indent-md {  
  margin-left: 1.5rem;  
}  
.ul-indent-lg {  
  margin-left: 2rem;  
}  
.ol-list,  
.ul-list {  
  list-style: disc;  
}

Text truncation

.truncate {  
  max-width: 100%;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  
.hide {  
  display: none;  
}

Picture and video specifications

.img-max,  
.video-max {  
  width: 100%;  
  height: auto;  
}  
/*display Display mode*/  
.inline {  
  display: inline;  
}  
.inline-block {  
  display: inline-block;  
}  
.block {  
  display: block;  
}

Border style

.border-xs-black {  
  border: 1px solid #000;  
}  
.border-sm-black {  
  border: 2px solid #000;  
}  
.border-md-black {  
  border: 3px solid #000;  
}  
.border-lg-black {  
  border: 5px solid #000;  
}  
  
.border-xs-gray {  
  border: 1px solid #9c9c9c;  
}  
.border-sm-gray {  
  border: 2px solid #9c9c9c;  
}  
.border-md-gray {  
  border: 3px solid #9c9c9c;  
}  
.border-lg-gray {  
  border: 5px solid #9c9c9c;  
}

background color

.bg-white {  
  background: #fff !important;  
}  
.bg-black {  
  background: #1b1c1d !important;  
}  
.bg-gray {  
  background: #767676 !important;  
}  
.bg-light-gray {  
  background: #f8f7f7 !important;  
}  
.bg-yellow {  
  background: #fbbd08 !important;  
}  
.bg-orange {  
  background: #f2711c !important;  
}  
.bg-red {  
  background: #db2828 !important;  
}  
.bg-olive {  
  background: #b5cc18 !important;  
}  
.bg-green {  
  background: #21ba45 !important;  
}  
.bg-teal {  
  background: #00b5ad !important;  
}  
.bg-darkGreen {  
  background: #19a97b !important;  
}  
.bg-threeGreen {  
  background: #097c25 !important;  
}  
.bg-blue {  
  background: #2185d0 !important;  
}  
.bg-violet {  
  background: #6435c9 !important;  
}  
.bg-purple {  
  background: #a333c8 !important;  
}  
.bg-brown {  
  background: #a5673f !important;  
}

Divider presets

hr,  
.hr-xs-Silver,  
.hr-sm-black,  
.hr-sm-Silver,  
.hr-xs-gray,  
.hr-sm-gray {  
  margin: 20px 0;  
}  
hr {  
  border: none;  
  border-top: 1px solid #000;  
}  
.hr-xs-Silver {  
  border: none;  
  border-top: 1px solid #c0c0c0;  
}  
.hr-sm-black {  
  border: none;  
  border-top: 2px solid #000;  
}  
.hr-sm-Silver {  
  border: none;  
  border-top: 2px solid #c0c0c0;  
}  
.hr-xs-gray {  
  border: none;  
  border-top: 1px solid #767676;  
}  
.hr-sm-gray {  
  border: none;  
  border-top: 2px solid #767676;  
}

hover effect of mouse a label

.hover-red a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-red:hover {  
  color: red;  
} /*Add the class name for the a tag separately*/  
.hover-yellow a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-yellow:hover {  
  color: #ffd700;  
} /*Add the class name for the a tag separately*/  
.hover-green a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-green:hover {  
  color: #70aa39;  
} /*Add the class name for the a tag separately*/  
.hover-blue a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-blue:hover {  
  color: blue;  
} /*Add the class name for the a tag separately*/  
.hover-gray a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-gray:hover {  
  color: #9c9c9c;  
} /*Add the class name for the a tag separately*/  
.underline a:hover,  
a.underline:hover {  
  text-decoration: underline;  
}

Shadow effect

.shadow-text-xs {  
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);  
} /*Intelligent compatible ie10 or above is not considered temporarily*/  
  
.shadow-xs {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */  
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */  
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */  
}  
.shadow-sm {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */  
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */  
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */  
}  
.shadow-md {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */  
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */  
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */  
}  
.shadow-lg {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */  
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */  
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */  
}

fillet

.border-radius-xs {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  
.border-radius-sm {  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-md {  
  -webkit-border-radius: 7px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-lg {  
  -webkit-border-radius: 9px;  
  -moz-border-radius: 9px;  
  border-radius: 9px;  
}

summary

If articles and notes can give you a little help or inspiration, please don't be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Clear floating

// Clear floating  
.clearfix:after {  
  content: "\00A0";  
  display: block;  
  visibility: hidden;  
  width: 0;  
  height: 0;  
  clear: both;  
  font-size: 0;  
  line-height: 0;  
  overflow: hidden;  
}  
.clearfix {  
  zoom: 1;  
}

Vertical horizontal center

Absolute positioning mode and known width and height

position: absolute;  
top: 50%;  
left: 50%;  
margin-top: -3em;  
margin-left: -7em;  
width: 14em;  
height: 6em;

Absolute positioning + unknown width and height + translate

position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
//Browser prefix required

flex easy horizontal vertical center (unknown width and height)

display: flex;  
align-items: center;  
justify-content: center;

Ellipsis at the end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width, suitable for single line display

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

Variable width, suitable for multi line and mobile display

overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 3;  
-webkit-box-orient: vertical;

Fuzzy effect of manufacturing text

We can do this when we want to create a fuzzy effect on the text

color: transparent;  
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Simple loading effect with animation

Let's implement a very simple loading effect

.loading:after {  
  display: inline-block;  
  overflow: hidden;  
  vertical-align: bottom;  
  content: "\2026";  
  -webkit-animation: ellipsis 2s infinite;  
}  
  
// Animation part  
@-webkit-keyframes ellipsis {  
  from {  
    width: 2px;  
  }  
  to {  
    width: 15px;  
  }  
}

Custom text selection style

// Note that you can only modify these two attributes font color select background color  
  
element::selection {  
  color: green;  
  background-color: pink;  
}  
element::-moz-selection {  
  color: green;  
  background-color: pink;  
}

Top corner sticker effect

Now let's go step by step to finish the leftmost effect

html

<div class="wrap">  
  <div class="ribbon">  
    <a href="#">Fork me on GitHub</a>  
  </div>  
</div>

css

/* Several settings of outer container  */  
.wrap {  
  width: 160px;  
  height: 160px;  
  overflow: hidden;  
  position: relative;  
  background-color: #f3f3f3;  
}  
  
.ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  position: absolute;  
  /* shadom */  
  -webkit-box-shadow: 0 0 10px #888;  
  -moz-box-shadow: 0 0 10px #888;  
  box-shadow: 0 0 10px #888;  
  /* rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* position */  
  left: -50px;  
  top: 40px;  
}  
  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* shadow */  
  text-shadow: 0 0 5px #444;  
}

input placeholder

When we set the placeholder property for some input types, sometimes we need to change the default style.

input::-webkit-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-moz-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-ms-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}

Mobile terminal can click the default border where the element goes

On mobile browsers, when you click a link or a clickable element defined by Javascript, a blue border will appear. To be honest, it's disgusting. How to remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

To achieve the effect similar to the drop cap in word, you can use the following code

element:first-letter {  
  float: left;  
  color: green;  
  font-size: 30px;  
}

Mistress triangle

We can use small triangles in many places. Next, let's draw triangles in four directions

.triangle {  
  /* Basic style */  
  border: solid 10px transparent;  
}  
/*lower*/  
.triangle.bottom {  
  border-top-color: green;  
}  
/*upper*/  
.triangle.top {  
  border-bottom-color: green;  
}  
/*Left*/  
.triangle.top {  
  border-right-color: green;  
}  
/*right*/  
.triangle.top {  
  border-left-color: green;  
}

Mouse hand type

In general, we want to add a mouse hand shape to the following elements

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],  
input[type="submit"],  
input[type="image"],  
input[type="button"],  
label[for],  
select,  
button {  
  cursor: pointer;  
}

Shielding the highlight effect of elements in Webkit mobile browser

When visiting the mobile website, you will find some gray boxes around the selected elements. Use the following code to block this style

-webkit-touch-callout: none;  
-webkit-user-select: none;  
-khtml-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;

Remove the default margin and padding for browsers with common tags

pre,code,legend,fieldset,blockquote … Etc. tags are not very common, so they are not listed one by one. If they are used in the project, you can write them separately

body,  
p,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
dl,  
dd,  
ul,  
ol,  
th,  
td,  
button,  
figure,  
input,  
textarea,  
form {  
  margin: 0;  
  padding: 0;  
}

Unified input, select, textarea width

The width of box models of input, select and textarea in different browsers is calculated differently, and they are unified into the most common content box

input,  
select,  
textarea {  
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;  
  box-sizing: content-box;  
}  
  
table {  
  /*table The distance between borders of adjacent cells is set to 0*/  
  border-spacing: 0;  
  /*By default, setting border to tr has no effect. If table has set border to merge mode: "border collapse: collapse;", it is OK*/  
  border-collapse: collapse;  
}

Remove the default border of some browser elements

acronym,fieldset … If other tags are not very common, they will not be listed one by one; if they are used in the project, they can be written separately

img,  
input,  
button,  
textarea {  
  border: none;  
  -webkit-appearance: none;  
}  
  
input {  
  /*Because input does not inherit the centering style of the parent element by default, set "text align: inherit"*/  
  text-align: inherit;  
}  
  
textarea {  
  /*textarea No zoom by default*/  
  resize: none;  
}

Cancel element outline style

Because some properties of the following elements do not inherit the parent node style, these properties of these elements are declared as properties of the parent element

a,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
input,  
select,  
button,  
option,  
textarea,  
optgroup {  
  font-family: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  line-height: inherit;  
  color: inherit;  
  outline: none;  
}

Remove the default text decoration for hyperlink elements

In addition, the dash and underline of del and ins labels are still very good, so they will not be removed

a {  
  text-decoration: none;  
}  
  
ol,  
ul {  
  /*In development, the list of UI design is too different from the original style, so the default list style of ol and ul is cancelled directly*/  
  list-style: none;  
}  
  
button,  
input[type="submit"],  
input[type="button"] {  
  /*The mouse is in the shape of "small hand", indicating that it can be clicked*/  
  cursor: pointer;  
}  
  
input::-moz-focus-inner {  
  /*The default "padding, border" when the input focus of some versions of Firefox is canceled*/  
  padding: 0;  
  border: 0;  
}

Cancel the action button of some browser digital input controls

input[type="number"] {  
  -moz-appearance: textfield;  
}  
  
input[type="number"]::-webkit-inner-spin-button,  
input[type="number"]::-webkit-outer-spin-button {  
  margin: 0;  
  -webkit-appearance: none;  
}

Enter the color setting of the control placeholder

input::-webkit-input-placeholder,  
textarea::-webkit-input-placeholder {  
  color: #999;  
}  
  
input:-moz-placeholder,  
textarea:-moz-placeholder {  
  color: #999;  
}  
  
input::-moz-placeholder,  
textarea::-moz-placeholder {  
  color: #999;  
}  
  
input:-ms-input-placeholder,  
textarea:-ms-input-placeholder {  
  color: #999;  
}  
  
template {  
  /*Because some browsing template s will be displayed, you need to hide*/  
  display: none;  
}

Position: short for fixed

.pf {  
  position: fixed;  
  /*chrome Kernel browser position: fixed to prevent jitter*/  
  -webkit-transform: translateZ(0);  
}

Use the principle of absolute positioning, width and height lifting, and center the element

.middle {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  margin: auto;  
}

Centering elements vertically with relative positioning in CSS3

.v-middle {  
  position: relative;  
  top: 50%;  
  -webkit-transform: -webkit-translateY(-50%);  
  -moz-transform: -moz-translateY(-50%);  
  -o-transform: -o-translateY(-50%);  
  transform: translateY(-50%);  
}

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

.bb {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

Single line text overflow display ellipsis "to = = > text overflow"

.to {  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

Initialize style

Different browsers have different default styles for each label. Sometimes we don't want to use the default style given by the browser. We can use reset.css to remove the default style

body,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
hr,  
p,  
blockquote,  
dl,  
dt,  
dd,  
ul,  
ol,  
li,  
pre,  
form,  
fieldset,  
legend,  
button,  
input,  
textarea,  
th,  
td {  
  margin: 0;  
  padding: 0;  
}  
body,  
button,  
input,  
select,  
textarea {  
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;  
}  
h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
  font-size: 100%;  
}  
address,  
cite,  
dfn,  
em,  
var {  
  font-style: normal;  
}  
code,  
kbd,  
pre,  
samp {  
  font-family: couriernew, courier, monospace;  
}  
small {  
  font-size: 12px;  
}  
ul,  
ol {  
  list-style: none;  
}  
a {  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
sup {  
  vertical-align: text-top;  
}  
sub {  
  vertical-align: text-bottom;  
}  
legend {  
  color: #000;  
}  
fieldset,  
img {  
  border: 0;  
}  
button,  
input,  
select,  
textarea {  
  font-size: 100%;  
}  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}

Force wrap / Auto wrap / force no wrap

/* Force no wrapping */  
div {  
  white-space: nowrap;  
}  
  
/* Automatic line feed */  
div {  
  word-wrap: break-word;  
  word-break: normal;  
}  
  
/* Force English word break */  
div {  
  word-break: break-all;  
}

Style of table boundary

table {  
  border: 1px solid #000;  
  padding: 0;  
  border-collapse: collapse;  
  table-layout: fixed;  
  margin-top: 10px;  
}  
table td {  
  height: 30px;  
  border: 1px solid #000;  
  background: #fff;  
  font-size: 15px;  
  padding: 3px 3px 3px 8px;  
  color: #000;  
  width: 160px;  
}

Absolute positioning and margin

When we know in advance the length and width of the element to be centered, we can use this method:

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  width: 160px;  
  height: 100px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-left: -80px; /* Half the width */  
  margin-top: -50px; /* Half the height */  
}

Absolute positioning and transform

When the elements to be centered are variable in width and height, we can use transform to offset the elements.

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);  
  text-align: center;  
}

line-height

Line height is actually row height. We can adjust the layout with row height!

However, there is a big disadvantage of this scheme: the copy must be single line, and if there are multiple lines, there will be problems with the set line height.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  line-height: 200px;  
}

table layout

Set display: table for the container element and display: table cell for the current element:

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: table;  
}  
.content {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center;  
}

flex layout

At the same time, the flex layout can also replace the problem that the line height scheme is not centered in some Android models.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
.content {  
  background-color: #ccc;  
  text-align: center;  
}

Picture top bottom left right center

.content {  
  width: 400px;  
  height: 400px;  
  border: 1px solid #ccc;  
  text-align: center;  
  display: table-cell;  
  vertical-align: middle;  
}

The html code is as follows:

<div class="content">  
  <img src="./4.jpg" alt="img" />  
</div>

Small bars on both sides of the title

Now we can use pseudo elements!

<div class="title">Title</div>

title {  
  color: #e1767c;  
  font-size: 0.3rem;  
  position: relative;  
  
  &:before,  
  &:after {  
    content: "";  
    position: absolute;  
    display: block;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate3d(-50%, -50%, 0);  
    transform: translate3d(-50%, -50%, 0);  
    border-top: 0.02rem solid #e1767c;  
    width: 0.4rem;  
  }  
  &:before {  
    margin-left: -1.2rem;  
  }  
  &:after {  
    margin-left: 1.2rem;  
  }  
}

Drawing elements with border attribute

In addition to being a simple drawing border, border can also draw arbitrary polygons such as triangles, trapezoids and stars. The following are two triangles and trapezoids drawn

<div class="triangle1"></div>  
<div class="triangle2"></div>  
<div class="trapezoid"></div>

.triangle1 {  
  /*Acute triangle*/  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 100px solid #249ff1;  
  border-left: 30px solid transparent;  
  border-right: 100px solid transparent;  
}  
.triangle2 {  
  /*right triangle*/  
  width: 0;  
  height: 0;  
  border-top: 80px solid transparent;  
  border-bottom: 80px solid #ff5b01;  
  border-left: 50px solid #ff5b01;  
  border-right: 50px solid transparent;  
}  
.trapezoid {  
  /*Trapezoid*/  
  width: 0;  
  height: 0;  
  border-top: none;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #13dbed;  
  border-left: 80px solid #13dbed;  
}

Drawing elements with border radius

Border radius is mainly used to draw the shapes of dots, circles, ellipses, rounded rectangles and so on. Here are two simple drawings.

<div class="circle"></div>  
<div class="ellipse"><div></div></div>

.circle,  
.ellipse {  
  width: 100px;  
  height: 100px;  
  background: #249ff1;  
  border-radius: 50%;  
}  
.ellipse {  
  width: 150px;  
  background: #ff9e01;  
}

But the border radius attribute can actually set up to 8 values, and many unexpected images can be obtained by changing 8 values

Drawing elements with box shadow

Three values: h-shadow v-shadow color
Four values: h-shadow v-shadow blur color
5 values: h-shadow v-shadow blur spread color
6 values: h-shadow v-shadow blur spread color inset

<div class="plus"></div>  
<div class="target"></div>

.plus {  
  width: 30px;  
  height: 30px;  
  margin-left: 50px; /*Because box shadow does not occupy space, it is often necessary to add margin to correct the position*/  
  background: #000;  
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;  
}  
.target {  
  width: 30px;  
  height: 30px;  
  background: red;  
  border-radius: 50%;  
  margin-left: 50px;  
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;  
}

Using CSS gradients to draw icons

The gradient property of CSS3 is very powerful. In theory, any graph can be drawn by gradient. The characteristics and use of gradient are enough to write a long article. Here is an example

<div class="gradient"></div>

.gradient {  
  position: relative;  
  width: 300px;  
  height: 300px;  
  border-radius: 50%;  
  background-color: silver;  
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),  
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(  
      335deg,  
      #b00 23px,  
      transparent 23px  
    ), linear-gradient(155deg, #d00 23px, transparent 23px);  
  background-size: 58px 58px;  
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;  
}

glass

.cup {  
  display: inline-block;  
  width: 0.9em;  
  height: 0.4em;  
  border: 0.25em solid;  
  border-bottom: 1.1em solid;  
  border-radius: 0 0 0.25em 0.25em;  
}  
cup:before {  
  position: absolute;  
  right: -0.6em;  
  top: 0;  
  width: 0.3em;  
  height: 0.8em;  
  border: 0.25em solid;  
  border-left: none;  
  border-radius: 0 0.25em 0.25em 0;  
  content: "";  
}

heart-shaped

.heart {  
  display: inline-block;  
  margin-top: 1.5em;  
  width: 50px;  
  height: 50px;  
  background: green;  
}  
.heart:before,  
.heart:after {  
  position: absolute;  
  width: 1em;  
  height: 1.6em;  
  background: #000;  
  border-radius: 50% 50% 0 0;  
  content: "";  
  bottom: 0;  
}  
.heart:before {  
  -webkit-transform: rotate(45deg);  
  -webkit-transform-origin: 100% 100%;  
  right: 0;  
  background: red;  
  opacity: 0.5;  
  z-index: 5;  
}  
.:after {  
  -webkit-transform: rotate(-45deg);  
  -webkit-transform-origin: 0 100%;  
  left: 0;  
  opacity: 0.8;  
}

camera

.camera {  
  display: inline-block;  
  border-style: solid;  
  border-width: 0.65em 0.9em;  
  border-radius: 0.1em;  
}  
.camera:before {  
  position: absolute;  
  top: -0.3em;  
  left: -0.3em;  
  width: 0.4em;  
  height: 0.4em;  
  border-radius: 50%;  
  border: 0.1em solid #fff;  
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;  
  content: "";  
}  
.camera:after {  
  position: absolute;  
  top: -0.5em;  
  left: 0.5em;  
  width: 0.2em;  
  border-top: 0.125em solid #fff;  
  content: "";  
}

Moon

.moon {  
  display: inline-block;  
  height: 1.5em;  
  width: 1.5em;  
  box-shadow: inset -0.4em 0 0;  
  border-radius: 2em;  
  transform: rotate(20deg);  
}

Floating class

General float list float image float

.float-left {  
  float: left;  
}  
.float-right {  
  float: right;  
}  
.float-li li,/*Defined on li parent element or ancestor element*/ li.float-li {  
  float: left;  
}  
.float-img img,/*Defined on img parent element or ancestor element*/ img.float-li {  
  float: left;  
}  
.float-span span,/*Defined on span parent element or ancestor element*/ span.float-span {  
  float: right;  
}

Background image embedding and positioning

.bg-img {  
  background-image: url("../img/bg.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg01-img {  
  background-image: url("../img/bg01.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg02-img {  
  background-image: url("../img/bg02.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg03-img {  
  background-image: url("../img/bg03.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg04-img {  
  background-image: url("../img/bg04.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}

Inheritance class

.inherit-width {  
  width: inherit;  
}  
.inherit-min-width {  
  min-width: inherit;  
}  
.inherit-height {  
  height: inherit;  
}  
.inherit-min-height {  
  min-height: inherit;  
}  
.inherit-color {  
  color: inherit;  
}

Text indentation

.text-indent {  
  text-indent: 2rem;  
}  
/*16px*/  
.text-indent-xs {  
  text-indent: 1.5rem;  
}  
/*12px*/  
.text-indent-sm {  
  text-indent: 1.7rem;  
}  
/*14px*/  
.text-indent-md {  
  text-indent: 2rem;  
}  
/*18px*/  
.text-indent-lg {  
  text-indent: 2.4rem;  
}  
/*20px*/

Row height

.line-height-xs {  
  line-height: 1.3rem;  
}  
.line-height-sm {  
  line-height: 1.5rem;  
}  
.line-height-md {  
  line-height: 1.7rem;  
}  
.line-height-lg {  
  line-height: 2rem;  
}  
  
.line-height-25x {  
  line-height: 25px;  
}  
.line-height-30x {  
  line-height: 30px;  
}

ul indentation

.ul-indent-xs {  
  margin-left: 0.5rem;  
}  
.ul-indent-sm {  
  margin-left: 1rem;  
}  
.ul-indent-md {  
  margin-left: 1.5rem;  
}  
.ul-indent-lg {  
  margin-left: 2rem;  
}  
.ol-list,  
.ul-list {  
  list-style: disc;  
}

Text truncation

.truncate {  
  max-width: 100%;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  
.hide {  
  display: none;  
}

Picture and video specifications

.img-max,  
.video-max {  
  width: 100%;  
  height: auto;  
}  
/*display Display mode*/  
.inline {  
  display: inline;  
}  
.inline-block {  
  display: inline-block;  
}  
.block {  
  display: block;  
}

Border style

.border-xs-black {  
  border: 1px solid #000;  
}  
.border-sm-black {  
  border: 2px solid #000;  
}  
.border-md-black {  
  border: 3px solid #000;  
}  
.border-lg-black {  
  border: 5px solid #000;  
}  
  
.border-xs-gray {  
  border: 1px solid #9c9c9c;  
}  
.border-sm-gray {  
  border: 2px solid #9c9c9c;  
}  
.border-md-gray {  
  border: 3px solid #9c9c9c;  
}  
.border-lg-gray {  
  border: 5px solid #9c9c9c;  
}

background color

.bg-white {  
  background: #fff !important;  
}  
.bg-black {  
  background: #1b1c1d !important;  
}  
.bg-gray {  
  background: #767676 !important;  
}  
.bg-light-gray {  
  background: #f8f7f7 !important;  
}  
.bg-yellow {  
  background: #fbbd08 !important;  
}  
.bg-orange {  
  background: #f2711c !important;  
}  
.bg-red {  
  background: #db2828 !important;  
}  
.bg-olive {  
  background: #b5cc18 !important;  
}  
.bg-green {  
  background: #21ba45 !important;  
}  
.bg-teal {  
  background: #00b5ad !important;  
}  
.bg-darkGreen {  
  background: #19a97b !important;  
}  
.bg-threeGreen {  
  background: #097c25 !important;  
}  
.bg-blue {  
  background: #2185d0 !important;  
}  
.bg-violet {  
  background: #6435c9 !important;  
}  
.bg-purple {  
  background: #a333c8 !important;  
}  
.bg-brown {  
  background: #a5673f !important;  
}

Divider presets

hr,  
.hr-xs-Silver,  
.hr-sm-black,  
.hr-sm-Silver,  
.hr-xs-gray,  
.hr-sm-gray {  
  margin: 20px 0;  
}  
hr {  
  border: none;  
  border-top: 1px solid #000;  
}  
.hr-xs-Silver {  
  border: none;  
  border-top: 1px solid #c0c0c0;  
}  
.hr-sm-black {  
  border: none;  
  border-top: 2px solid #000;  
}  
.hr-sm-Silver {  
  border: none;  
  border-top: 2px solid #c0c0c0;  
}  
.hr-xs-gray {  
  border: none;  
  border-top: 1px solid #767676;  
}  
.hr-sm-gray {  
  border: none;  
  border-top: 2px solid #767676;  
}

hover effect of mouse a label

.hover-red a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-red:hover {  
  color: red;  
} /*Add the class name for the a tag separately*/  
.hover-yellow a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-yellow:hover {  
  color: #ffd700;  
} /*Add the class name for the a tag separately*/  
.hover-green a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-green:hover {  
  color: #70aa39;  
} /*Add the class name for the a tag separately*/  
.hover-blue a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-blue:hover {  
  color: blue;  
} /*Add the class name for the a tag separately*/  
.hover-gray a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-gray:hover {  
  color: #9c9c9c;  
} /*Add the class name for the a tag separately*/  
.underline a:hover,  
a.underline:hover {  
  text-decoration: underline;  
}

Shadow effect

.shadow-text-xs {  
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);  
} /*Intelligent compatible ie10 or above is not considered temporarily*/  
  
.shadow-xs {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */  
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */  
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */  
}  
.shadow-sm {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */  
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */  
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */  
}  
.shadow-md {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */  
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */  
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */  
}  
.shadow-lg {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */  
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */  
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */  
}

fillet

.border-radius-xs {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  
.border-radius-sm {  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-md {  
  -webkit-border-radius: 7px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-lg {  
  -webkit-border-radius: 9px;  
  -moz-border-radius: 9px;  
  border-radius: 9px;  
}

summary

If articles and notes can give you a little help or inspiration, please don't be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Clear floating

// Clear floating  
.clearfix:after {  
  content: "\00A0";  
  display: block;  
  visibility: hidden;  
  width: 0;  
  height: 0;  
  clear: both;  
  font-size: 0;  
  line-height: 0;  
  overflow: hidden;  
}  
.clearfix {  
  zoom: 1;  
}

Vertical horizontal center

Absolute positioning mode and known width and height

position: absolute;  
top: 50%;  
left: 50%;  
margin-top: -3em;  
margin-left: -7em;  
width: 14em;  
height: 6em;

Absolute positioning + unknown width and height + translate

position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
//Browser prefix required

flex easy horizontal vertical center (unknown width and height)

display: flex;  
align-items: center;  
justify-content: center;

Ellipsis at the end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width, suitable for single line display

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

Variable width, suitable for multi line and mobile display

overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 3;  
-webkit-box-orient: vertical;

Fuzzy effect of manufacturing text

We can do this when we want to create a fuzzy effect on the text

color: transparent;  
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Simple loading effect with animation

Let's implement a very simple loading effect

.loading:after {  
  display: inline-block;  
  overflow: hidden;  
  vertical-align: bottom;  
  content: "\2026";  
  -webkit-animation: ellipsis 2s infinite;  
}  
  
// Animation part  
@-webkit-keyframes ellipsis {  
  from {  
    width: 2px;  
  }  
  to {  
    width: 15px;  
  }  
}

Custom text selection style

// Note that you can only modify these two attributes font color select background color  
  
element::selection {  
  color: green;  
  background-color: pink;  
}  
element::-moz-selection {  
  color: green;  
  background-color: pink;  
}

Top corner sticker effect

Now let's go step by step to finish the leftmost effect

html

<div class="wrap">  
  <div class="ribbon">  
    <a href="#">Fork me on GitHub</a>  
  </div>  
</div>

css

/* Several settings of outer container  */  
.wrap {  
  width: 160px;  
  height: 160px;  
  overflow: hidden;  
  position: relative;  
  background-color: #f3f3f3;  
}  
  
.ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  position: absolute;  
  /* shadom */  
  -webkit-box-shadow: 0 0 10px #888;  
  -moz-box-shadow: 0 0 10px #888;  
  box-shadow: 0 0 10px #888;  
  /* rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* position */  
  left: -50px;  
  top: 40px;  
}  
  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* shadow */  
  text-shadow: 0 0 5px #444;  
}

input placeholder

When we set the placeholder property for some input types, sometimes we need to change the default style.

input::-webkit-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-moz-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-ms-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}

Mobile terminal can click the default border where the element goes

On mobile browsers, when you click a link or a clickable element defined by Javascript, a blue border will appear. To be honest, it's disgusting. How to remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

To achieve the effect similar to the drop cap in word, you can use the following code

element:first-letter {  
  float: left;  
  color: green;  
  font-size: 30px;  
}

Mistress triangle

We can use small triangles in many places. Next, let's draw triangles in four directions

.triangle {  
  /* Basic style */  
  border: solid 10px transparent;  
}  
/*lower*/  
.triangle.bottom {  
  border-top-color: green;  
}  
/*upper*/  
.triangle.top {  
  border-bottom-color: green;  
}  
/*Left*/  
.triangle.top {  
  border-right-color: green;  
}  
/*right*/  
.triangle.top {  
  border-left-color: green;  
}

Mouse hand type

In general, we want to add a mouse hand shape to the following elements

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],  
input[type="submit"],  
input[type="image"],  
input[type="button"],  
label[for],  
select,  
button {  
  cursor: pointer;  
}

Shielding the highlight effect of elements in Webkit mobile browser

When visiting the mobile website, you will find some gray boxes around the selected elements. Use the following code to block this style

-webkit-touch-callout: none;  
-webkit-user-select: none;  
-khtml-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;

Remove the default margin and padding for browsers with common tags

pre,code,legend,fieldset,blockquote … Etc. tags are not very common, so they are not listed one by one. If they are used in the project, you can write them separately

body,  
p,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
dl,  
dd,  
ul,  
ol,  
th,  
td,  
button,  
figure,  
input,  
textarea,  
form {  
  margin: 0;  
  padding: 0;  
}

Unified input, select, textarea width

The width of box models of input, select and textarea in different browsers is calculated differently, and they are unified into the most common content box

input,  
select,  
textarea {  
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;  
  box-sizing: content-box;  
}  
  
table {  
  /*table The distance between borders of adjacent cells is set to 0*/  
  border-spacing: 0;  
  /*By default, setting border to tr has no effect. If table has set border to merge mode: "border collapse: collapse;", it is OK*/  
  border-collapse: collapse;  
}

Remove the default border of some browser elements

acronym,fieldset … If other tags are not very common, they will not be listed one by one; if they are used in the project, they can be written separately

img,  
input,  
button,  
textarea {  
  border: none;  
  -webkit-appearance: none;  
}  
  
input {  
  /*Because input does not inherit the centering style of the parent element by default, set "text align: inherit"*/  
  text-align: inherit;  
}  
  
textarea {  
  /*textarea No zoom by default*/  
  resize: none;  
}

Cancel element outline style

Because some properties of the following elements do not inherit the parent node style, these properties of these elements are declared as properties of the parent element

a,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
input,  
select,  
button,  
option,  
textarea,  
optgroup {  
  font-family: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  line-height: inherit;  
  color: inherit;  
  outline: none;  
}

Remove the default text decoration for hyperlink elements

In addition, the dash and underline of del and ins labels are still very good, so they will not be removed

a {  
  text-decoration: none;  
}  
  
ol,  
ul {  
  /*In development, the list of UI design is too different from the original style, so the default list style of ol and ul is cancelled directly*/  
  list-style: none;  
}  
  
button,  
input[type="submit"],  
input[type="button"] {  
  /*The mouse is in the shape of "small hand", indicating that it can be clicked*/  
  cursor: pointer;  
}  
  
input::-moz-focus-inner {  
  /*The default "padding, border" when the input focus of some versions of Firefox is canceled*/  
  padding: 0;  
  border: 0;  
}

Cancel the action button of some browser digital input controls

input[type="number"] {  
  -moz-appearance: textfield;  
}  
  
input[type="number"]::-webkit-inner-spin-button,  
input[type="number"]::-webkit-outer-spin-button {  
  margin: 0;  
  -webkit-appearance: none;  
}

Enter the color setting of the control placeholder

input::-webkit-input-placeholder,  
textarea::-webkit-input-placeholder {  
  color: #999;  
}  
  
input:-moz-placeholder,  
textarea:-moz-placeholder {  
  color: #999;  
}  
  
input::-moz-placeholder,  
textarea::-moz-placeholder {  
  color: #999;  
}  
  
input:-ms-input-placeholder,  
textarea:-ms-input-placeholder {  
  color: #999;  
}  
  
template {  
  /*Because some browsing template s will be displayed, you need to hide*/  
  display: none;  
}

Position: short for fixed

.pf {  
  position: fixed;  
  /*chrome Kernel browser position: fixed to prevent jitter*/  
  -webkit-transform: translateZ(0);  
}

Use the principle of absolute positioning, width and height lifting, and center the element

.middle {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  margin: auto;  
}

Centering elements vertically with relative positioning in CSS3

.v-middle {  
  position: relative;  
  top: 50%;  
  -webkit-transform: -webkit-translateY(-50%);  
  -moz-transform: -moz-translateY(-50%);  
  -o-transform: -o-translateY(-50%);  
  transform: translateY(-50%);  
}

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

.bb {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

Single line text overflow display ellipsis "to = = > text overflow"

.to {  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

Initialize style

Different browsers have different default styles for each label. Sometimes we don't want to use the default style given by the browser. We can use reset.css to remove the default style

body,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
hr,  
p,  
blockquote,  
dl,  
dt,  
dd,  
ul,  
ol,  
li,  
pre,  
form,  
fieldset,  
legend,  
button,  
input,  
textarea,  
th,  
td {  
  margin: 0;  
  padding: 0;  
}  
body,  
button,  
input,  
select,  
textarea {  
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;  
}  
h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
  font-size: 100%;  
}  
address,  
cite,  
dfn,  
em,  
var {  
  font-style: normal;  
}  
code,  
kbd,  
pre,  
samp {  
  font-family: couriernew, courier, monospace;  
}  
small {  
  font-size: 12px;  
}  
ul,  
ol {  
  list-style: none;  
}  
a {  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
sup {  
  vertical-align: text-top;  
}  
sub {  
  vertical-align: text-bottom;  
}  
legend {  
  color: #000;  
}  
fieldset,  
img {  
  border: 0;  
}  
button,  
input,  
select,  
textarea {  
  font-size: 100%;  
}  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}

Force wrap / Auto wrap / force no wrap

/* Force no wrapping */  
div {  
  white-space: nowrap;  
}  
  
/* Automatic line feed */  
div {  
  word-wrap: break-word;  
  word-break: normal;  
}  
  
/* Force English word break */  
div {  
  word-break: break-all;  
}

Style of table boundary

table {  
  border: 1px solid #000;  
  padding: 0;  
  border-collapse: collapse;  
  table-layout: fixed;  
  margin-top: 10px;  
}  
table td {  
  height: 30px;  
  border: 1px solid #000;  
  background: #fff;  
  font-size: 15px;  
  padding: 3px 3px 3px 8px;  
  color: #000;  
  width: 160px;  
}

Absolute positioning and margin

When we know in advance the length and width of the element to be centered, we can use this method:

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  width: 160px;  
  height: 100px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-left: -80px; /* Half the width */  
  margin-top: -50px; /* Half the height */  
}

Absolute positioning and transform

When the elements to be centered are variable in width and height, we can use transform to offset the elements.

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);  
  text-align: center;  
}

line-height

Line height is actually row height. We can adjust the layout with row height!

However, there is a big disadvantage of this scheme: the copy must be single line, and if there are multiple lines, there will be problems with the set line height.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  line-height: 200px;  
}

table layout

Set display: table for the container element and display: table cell for the current element:

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: table;  
}  
.content {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center;  
}

flex layout

At the same time, the flex layout can also replace the problem that the line height scheme is not centered in some Android models.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
.content {  
  background-color: #ccc;  
  text-align: center;  
}

Picture top bottom left right center

.content {  
  width: 400px;  
  height: 400px;  
  border: 1px solid #ccc;  
  text-align: center;  
  display: table-cell;  
  vertical-align: middle;  
}

The html code is as follows:

<div class="content">  
  <img src="./4.jpg" alt="img" />  
</div>

Small bars on both sides of the title

Now we can use pseudo elements!

<div class="title">Title</div>

title {  
  color: #e1767c;  
  font-size: 0.3rem;  
  position: relative;  
  
  &:before,  
  &:after {  
    content: "";  
    position: absolute;  
    display: block;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate3d(-50%, -50%, 0);  
    transform: translate3d(-50%, -50%, 0);  
    border-top: 0.02rem solid #e1767c;  
    width: 0.4rem;  
  }  
  &:before {  
    margin-left: -1.2rem;  
  }  
  &:after {  
    margin-left: 1.2rem;  
  }  
}

Drawing elements with border attribute

In addition to being a simple drawing border, border can also draw arbitrary polygons such as triangles, trapezoids and stars. The following are two triangles and trapezoids drawn

<div class="triangle1"></div>  
<div class="triangle2"></div>  
<div class="trapezoid"></div>

.triangle1 {  
  /*Acute triangle*/  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 100px solid #249ff1;  
  border-left: 30px solid transparent;  
  border-right: 100px solid transparent;  
}  
.triangle2 {  
  /*right triangle*/  
  width: 0;  
  height: 0;  
  border-top: 80px solid transparent;  
  border-bottom: 80px solid #ff5b01;  
  border-left: 50px solid #ff5b01;  
  border-right: 50px solid transparent;  
}  
.trapezoid {  
  /*Trapezoid*/  
  width: 0;  
  height: 0;  
  border-top: none;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #13dbed;  
  border-left: 80px solid #13dbed;  
}

Drawing elements with border radius

Border radius is mainly used to draw the shapes of dots, circles, ellipses, rounded rectangles and so on. Here are two simple drawings.

<div class="circle"></div>  
<div class="ellipse"><div></div></div>

.circle,  
.ellipse {  
  width: 100px;  
  height: 100px;  
  background: #249ff1;  
  border-radius: 50%;  
}  
.ellipse {  
  width: 150px;  
  background: #ff9e01;  
}

But the border radius attribute can actually set up to 8 values, and many unexpected images can be obtained by changing 8 values

Drawing elements with box shadow

Three values: h-shadow v-shadow color
Four values: h-shadow v-shadow blur color
5 values: h-shadow v-shadow blur spread color
6 values: h-shadow v-shadow blur spread color inset

<div class="plus"></div>  
<div class="target"></div>

.plus {  
  width: 30px;  
  height: 30px;  
  margin-left: 50px; /*Because box shadow does not occupy space, it is often necessary to add margin to correct the position*/  
  background: #000;  
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;  
}  
.target {  
  width: 30px;  
  height: 30px;  
  background: red;  
  border-radius: 50%;  
  margin-left: 50px;  
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;  
}

Using CSS gradients to draw icons

The gradient property of CSS3 is very powerful. In theory, any graph can be drawn by gradient. The characteristics and use of gradient are enough to write a long article. Here is an example

<div class="gradient"></div>

.gradient {  
  position: relative;  
  width: 300px;  
  height: 300px;  
  border-radius: 50%;  
  background-color: silver;  
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),  
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(  
      335deg,  
      #b00 23px,  
      transparent 23px  
    ), linear-gradient(155deg, #d00 23px, transparent 23px);  
  background-size: 58px 58px;  
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;  
}

glass

.cup {  
  display: inline-block;  
  width: 0.9em;  
  height: 0.4em;  
  border: 0.25em solid;  
  border-bottom: 1.1em solid;  
  border-radius: 0 0 0.25em 0.25em;  
}  
cup:before {  
  position: absolute;  
  right: -0.6em;  
  top: 0;  
  width: 0.3em;  
  height: 0.8em;  
  border: 0.25em solid;  
  border-left: none;  
  border-radius: 0 0.25em 0.25em 0;  
  content: "";  
}

heart-shaped

.heart {  
  display: inline-block;  
  margin-top: 1.5em;  
  width: 50px;  
  height: 50px;  
  background: green;  
}  
.heart:before,  
.heart:after {  
  position: absolute;  
  width: 1em;  
  height: 1.6em;  
  background: #000;  
  border-radius: 50% 50% 0 0;  
  content: "";  
  bottom: 0;  
}  
.heart:before {  
  -webkit-transform: rotate(45deg);  
  -webkit-transform-origin: 100% 100%;  
  right: 0;  
  background: red;  
  opacity: 0.5;  
  z-index: 5;  
}  
.:after {  
  -webkit-transform: rotate(-45deg);  
  -webkit-transform-origin: 0 100%;  
  left: 0;  
  opacity: 0.8;  
}

camera

.camera {  
  display: inline-block;  
  border-style: solid;  
  border-width: 0.65em 0.9em;  
  border-radius: 0.1em;  
}  
.camera:before {  
  position: absolute;  
  top: -0.3em;  
  left: -0.3em;  
  width: 0.4em;  
  height: 0.4em;  
  border-radius: 50%;  
  border: 0.1em solid #fff;  
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;  
  content: "";  
}  
.camera:after {  
  position: absolute;  
  top: -0.5em;  
  left: 0.5em;  
  width: 0.2em;  
  border-top: 0.125em solid #fff;  
  content: "";  
}

Moon

.moon {  
  display: inline-block;  
  height: 1.5em;  
  width: 1.5em;  
  box-shadow: inset -0.4em 0 0;  
  border-radius: 2em;  
  transform: rotate(20deg);  
}

Floating class

General float list float image float

.float-left {  
  float: left;  
}  
.float-right {  
  float: right;  
}  
.float-li li,/*Defined on li parent element or ancestor element*/ li.float-li {  
  float: left;  
}  
.float-img img,/*Defined on img parent element or ancestor element*/ img.float-li {  
  float: left;  
}  
.float-span span,/*Defined on span parent element or ancestor element*/ span.float-span {  
  float: right;  
}

Background image embedding and positioning

.bg-img {  
  background-image: url("../img/bg.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg01-img {  
  background-image: url("../img/bg01.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg02-img {  
  background-image: url("../img/bg02.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg03-img {  
  background-image: url("../img/bg03.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg04-img {  
  background-image: url("../img/bg04.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}

Inheritance class

.inherit-width {  
  width: inherit;  
}  
.inherit-min-width {  
  min-width: inherit;  
}  
.inherit-height {  
  height: inherit;  
}  
.inherit-min-height {  
  min-height: inherit;  
}  
.inherit-color {  
  color: inherit;  
}

Text indentation

.text-indent {  
  text-indent: 2rem;  
}  
/*16px*/  
.text-indent-xs {  
  text-indent: 1.5rem;  
}  
/*12px*/  
.text-indent-sm {  
  text-indent: 1.7rem;  
}  
/*14px*/  
.text-indent-md {  
  text-indent: 2rem;  
}  
/*18px*/  
.text-indent-lg {  
  text-indent: 2.4rem;  
}  
/*20px*/

Row height

.line-height-xs {  
  line-height: 1.3rem;  
}  
.line-height-sm {  
  line-height: 1.5rem;  
}  
.line-height-md {  
  line-height: 1.7rem;  
}  
.line-height-lg {  
  line-height: 2rem;  
}  
  
.line-height-25x {  
  line-height: 25px;  
}  
.line-height-30x {  
  line-height: 30px;  
}

ul indentation

.ul-indent-xs {  
  margin-left: 0.5rem;  
}  
.ul-indent-sm {  
  margin-left: 1rem;  
}  
.ul-indent-md {  
  margin-left: 1.5rem;  
}  
.ul-indent-lg {  
  margin-left: 2rem;  
}  
.ol-list,  
.ul-list {  
  list-style: disc;  
}

Text truncation

.truncate {  
  max-width: 100%;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  
.hide {  
  display: none;  
}

Picture and video specifications

.img-max,  
.video-max {  
  width: 100%;  
  height: auto;  
}  
/*display Display mode*/  
.inline {  
  display: inline;  
}  
.inline-block {  
  display: inline-block;  
}  
.block {  
  display: block;  
}

Border style

.border-xs-black {  
  border: 1px solid #000;  
}  
.border-sm-black {  
  border: 2px solid #000;  
}  
.border-md-black {  
  border: 3px solid #000;  
}  
.border-lg-black {  
  border: 5px solid #000;  
}  
  
.border-xs-gray {  
  border: 1px solid #9c9c9c;  
}  
.border-sm-gray {  
  border: 2px solid #9c9c9c;  
}  
.border-md-gray {  
  border: 3px solid #9c9c9c;  
}  
.border-lg-gray {  
  border: 5px solid #9c9c9c;  
}

background color

.bg-white {  
  background: #fff !important;  
}  
.bg-black {  
  background: #1b1c1d !important;  
}  
.bg-gray {  
  background: #767676 !important;  
}  
.bg-light-gray {  
  background: #f8f7f7 !important;  
}  
.bg-yellow {  
  background: #fbbd08 !important;  
}  
.bg-orange {  
  background: #f2711c !important;  
}  
.bg-red {  
  background: #db2828 !important;  
}  
.bg-olive {  
  background: #b5cc18 !important;  
}  
.bg-green {  
  background: #21ba45 !important;  
}  
.bg-teal {  
  background: #00b5ad !important;  
}  
.bg-darkGreen {  
  background: #19a97b !important;  
}  
.bg-threeGreen {  
  background: #097c25 !important;  
}  
.bg-blue {  
  background: #2185d0 !important;  
}  
.bg-violet {  
  background: #6435c9 !important;  
}  
.bg-purple {  
  background: #a333c8 !important;  
}  
.bg-brown {  
  background: #a5673f !important;  
}

Divider presets

hr,  
.hr-xs-Silver,  
.hr-sm-black,  
.hr-sm-Silver,  
.hr-xs-gray,  
.hr-sm-gray {  
  margin: 20px 0;  
}  
hr {  
  border: none;  
  border-top: 1px solid #000;  
}  
.hr-xs-Silver {  
  border: none;  
  border-top: 1px solid #c0c0c0;  
}  
.hr-sm-black {  
  border: none;  
  border-top: 2px solid #000;  
}  
.hr-sm-Silver {  
  border: none;  
  border-top: 2px solid #c0c0c0;  
}  
.hr-xs-gray {  
  border: none;  
  border-top: 1px solid #767676;  
}  
.hr-sm-gray {  
  border: none;  
  border-top: 2px solid #767676;  
}

hover effect of mouse a label

.hover-red a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-red:hover {  
  color: red;  
} /*Add the class name for the a tag separately*/  
.hover-yellow a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-yellow:hover {  
  color: #ffd700;  
} /*Add the class name for the a tag separately*/  
.hover-green a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-green:hover {  
  color: #70aa39;  
} /*Add the class name for the a tag separately*/  
.hover-blue a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-blue:hover {  
  color: blue;  
} /*Add the class name for the a tag separately*/  
.hover-gray a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-gray:hover {  
  color: #9c9c9c;  
} /*Add the class name for the a tag separately*/  
.underline a:hover,  
a.underline:hover {  
  text-decoration: underline;  
}

Shadow effect

.shadow-text-xs {  
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);  
} /*Intelligent compatible ie10 or above is not considered temporarily*/  
  
.shadow-xs {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */  
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */  
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */  
}  
.shadow-sm {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */  
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */  
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */  
}  
.shadow-md {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */  
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */  
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */  
}  
.shadow-lg {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */  
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */  
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */  
}

fillet

.border-radius-xs {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  
.border-radius-sm {  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-md {  
  -webkit-border-radius: 7px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-lg {  
  -webkit-border-radius: 9px;  
  -moz-border-radius: 9px;  
  border-radius: 9px;  
}

summary

If articles and notes can give you a little help or inspiration, please don't be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Clear floating

// Clear floating  
.clearfix:after {  
  content: "\00A0";  
  display: block;  
  visibility: hidden;  
  width: 0;  
  height: 0;  
  clear: both;  
  font-size: 0;  
  line-height: 0;  
  overflow: hidden;  
}  
.clearfix {  
  zoom: 1;  
}

Vertical horizontal center

Absolute positioning mode and known width and height

position: absolute;  
top: 50%;  
left: 50%;  
margin-top: -3em;  
margin-left: -7em;  
width: 14em;  
height: 6em;

Absolute positioning + unknown width and height + translate

position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
//Browser prefix required

flex easy horizontal vertical center (unknown width and height)

display: flex;  
align-items: center;  
justify-content: center;

Ellipsis at the end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width, suitable for single line display

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

Variable width, suitable for multi line and mobile display

overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 3;  
-webkit-box-orient: vertical;

Fuzzy effect of manufacturing text

We can do this when we want to create a fuzzy effect on the text

color: transparent;  
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Simple loading effect with animation

Let's implement a very simple loading effect

.loading:after {  
  display: inline-block;  
  overflow: hidden;  
  vertical-align: bottom;  
  content: "\2026";  
  -webkit-animation: ellipsis 2s infinite;  
}  
  
// Animation part  
@-webkit-keyframes ellipsis {  
  from {  
    width: 2px;  
  }  
  to {  
    width: 15px;  
  }  
}

Custom text selection style

// Note that you can only modify these two attributes font color select background color  
  
element::selection {  
  color: green;  
  background-color: pink;  
}  
element::-moz-selection {  
  color: green;  
  background-color: pink;  
}

Top corner sticker effect

Now let's go step by step to finish the leftmost effect

html

<div class="wrap">  
  <div class="ribbon">  
    <a href="#">Fork me on GitHub</a>  
  </div>  
</div>

css

/* Several settings of outer container  */  
.wrap {  
  width: 160px;  
  height: 160px;  
  overflow: hidden;  
  position: relative;  
  background-color: #f3f3f3;  
}  
  
.ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  position: absolute;  
  /* shadom */  
  -webkit-box-shadow: 0 0 10px #888;  
  -moz-box-shadow: 0 0 10px #888;  
  box-shadow: 0 0 10px #888;  
  /* rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* position */  
  left: -50px;  
  top: 40px;  
}  
  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* shadow */  
  text-shadow: 0 0 5px #444;  
}

input placeholder

When we set the placeholder property for some input types, sometimes we need to change the default style.

input::-webkit-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-moz-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-ms-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}

Mobile terminal can click the default border where the element goes

On mobile browsers, when you click a link or a clickable element defined by Javascript, a blue border will appear. To be honest, it's disgusting. How to remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

To achieve the effect similar to the drop cap in word, you can use the following code

element:first-letter {  
  float: left;  
  color: green;  
  font-size: 30px;  
}

Mistress triangle

We can use small triangles in many places. Next, let's draw triangles in four directions

.triangle {  
  /* Basic style */  
  border: solid 10px transparent;  
}  
/*lower*/  
.triangle.bottom {  
  border-top-color: green;  
}  
/*upper*/  
.triangle.top {  
  border-bottom-color: green;  
}  
/*Left*/  
.triangle.top {  
  border-right-color: green;  
}  
/*right*/  
.triangle.top {  
  border-left-color: green;  
}

Mouse hand type

In general, we want to add a mouse hand shape to the following elements

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],  
input[type="submit"],  
input[type="image"],  
input[type="button"],  
label[for],  
select,  
button {  
  cursor: pointer;  
}

Shielding the highlight effect of elements in Webkit mobile browser

When visiting the mobile website, you will find some gray boxes around the selected elements. Use the following code to block this style

-webkit-touch-callout: none;  
-webkit-user-select: none;  
-khtml-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;

Remove the default margin and padding for browsers with common tags

pre,code,legend,fieldset,blockquote … Etc. tags are not very common, so they are not listed one by one. If they are used in the project, you can write them separately

body,  
p,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
dl,  
dd,  
ul,  
ol,  
th,  
td,  
button,  
figure,  
input,  
textarea,  
form {  
  margin: 0;  
  padding: 0;  
}

Unified input, select, textarea width

The width of box models of input, select and textarea in different browsers is calculated differently, and they are unified into the most common content box

input,  
select,  
textarea {  
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;  
  box-sizing: content-box;  
}  
  
table {  
  /*table The distance between borders of adjacent cells is set to 0*/  
  border-spacing: 0;  
  /*By default, setting border to tr has no effect. If table has set border to merge mode: "border collapse: collapse;", it is OK*/  
  border-collapse: collapse;  
}

Remove the default border of some browser elements

acronym,fieldset … If other tags are not very common, they will not be listed one by one; if they are used in the project, they can be written separately

img,  
input,  
button,  
textarea {  
  border: none;  
  -webkit-appearance: none;  
}  
  
input {  
  /*Because input does not inherit the centering style of the parent element by default, set "text align: inherit"*/  
  text-align: inherit;  
}  
  
textarea {  
  /*textarea No zoom by default*/  
  resize: none;  
}

Cancel element outline style

Because some properties of the following elements do not inherit the parent node style, these properties of these elements are declared as properties of the parent element

a,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
input,  
select,  
button,  
option,  
textarea,  
optgroup {  
  font-family: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  line-height: inherit;  
  color: inherit;  
  outline: none;  
}

Remove the default text decoration for hyperlink elements

In addition, the dash and underline of del and ins labels are still very good, so they will not be removed

a {  
  text-decoration: none;  
}  
  
ol,  
ul {  
  /*In development, the list of UI design is too different from the original style, so the default list style of ol and ul is cancelled directly*/  
  list-style: none;  
}  
  
button,  
input[type="submit"],  
input[type="button"] {  
  /*The mouse is in the shape of "small hand", indicating that it can be clicked*/  
  cursor: pointer;  
}  
  
input::-moz-focus-inner {  
  /*The default "padding, border" when the input focus of some versions of Firefox is canceled*/  
  padding: 0;  
  border: 0;  
}

Cancel the action button of some browser digital input controls

input[type="number"] {  
  -moz-appearance: textfield;  
}  
  
input[type="number"]::-webkit-inner-spin-button,  
input[type="number"]::-webkit-outer-spin-button {  
  margin: 0;  
  -webkit-appearance: none;  
}

Enter the color setting of the control placeholder

input::-webkit-input-placeholder,  
textarea::-webkit-input-placeholder {  
  color: #999;  
}  
  
input:-moz-placeholder,  
textarea:-moz-placeholder {  
  color: #999;  
}  
  
input::-moz-placeholder,  
textarea::-moz-placeholder {  
  color: #999;  
}  
  
input:-ms-input-placeholder,  
textarea:-ms-input-placeholder {  
  color: #999;  
}  
  
template {  
  /*Because some browsing template s will be displayed, you need to hide*/  
  display: none;  
}

Position: short for fixed

.pf {  
  position: fixed;  
  /*chrome Kernel browser position: fixed to prevent jitter*/  
  -webkit-transform: translateZ(0);  
}

Use the principle of absolute positioning, width and height lifting, and center the element

.middle {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  margin: auto;  
}

Centering elements vertically with relative positioning in CSS3

.v-middle {  
  position: relative;  
  top: 50%;  
  -webkit-transform: -webkit-translateY(-50%);  
  -moz-transform: -moz-translateY(-50%);  
  -o-transform: -o-translateY(-50%);  
  transform: translateY(-50%);  
}

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

.bb {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

Single line text overflow display ellipsis "to = = > text overflow"

.to {  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

Initialize style

Different browsers have different default styles for each label. Sometimes we don't want to use the default style given by the browser. We can use reset.css to remove the default style

body,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
hr,  
p,  
blockquote,  
dl,  
dt,  
dd,  
ul,  
ol,  
li,  
pre,  
form,  
fieldset,  
legend,  
button,  
input,  
textarea,  
th,  
td {  
  margin: 0;  
  padding: 0;  
}  
body,  
button,  
input,  
select,  
textarea {  
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;  
}  
h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
  font-size: 100%;  
}  
address,  
cite,  
dfn,  
em,  
var {  
  font-style: normal;  
}  
code,  
kbd,  
pre,  
samp {  
  font-family: couriernew, courier, monospace;  
}  
small {  
  font-size: 12px;  
}  
ul,  
ol {  
  list-style: none;  
}  
a {  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
sup {  
  vertical-align: text-top;  
}  
sub {  
  vertical-align: text-bottom;  
}  
legend {  
  color: #000;  
}  
fieldset,  
img {  
  border: 0;  
}  
button,  
input,  
select,  
textarea {  
  font-size: 100%;  
}  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}

Force wrap / Auto wrap / force no wrap

/* Force no wrapping */  
div {  
  white-space: nowrap;  
}  
  
/* Automatic line feed */  
div {  
  word-wrap: break-word;  
  word-break: normal;  
}  
  
/* Force English word break */  
div {  
  word-break: break-all;  
}

Style of table boundary

table {  
  border: 1px solid #000;  
  padding: 0;  
  border-collapse: collapse;  
  table-layout: fixed;  
  margin-top: 10px;  
}  
table td {  
  height: 30px;  
  border: 1px solid #000;  
  background: #fff;  
  font-size: 15px;  
  padding: 3px 3px 3px 8px;  
  color: #000;  
  width: 160px;  
}

Absolute positioning and margin

When we know in advance the length and width of the element to be centered, we can use this method:

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  width: 160px;  
  height: 100px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-left: -80px; /* Half the width */  
  margin-top: -50px; /* Half the height */  
}

Absolute positioning and transform

When the elements to be centered are variable in width and height, we can use transform to offset the elements.

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);  
  text-align: center;  
}

line-height

Line height is actually row height. We can adjust the layout with row height!

However, there is a big disadvantage of this scheme: the copy must be single line, and if there are multiple lines, there will be problems with the set line height.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  line-height: 200px;  
}

table layout

Set display: table for the container element and display: table cell for the current element:

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: table;  
}  
.content {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center;  
}

flex layout

At the same time, the flex layout can also replace the problem that the line height scheme is not centered in some Android models.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
.content {  
  background-color: #ccc;  
  text-align: center;  
}

Picture top bottom left right center

.content {  
  width: 400px;  
  height: 400px;  
  border: 1px solid #ccc;  
  text-align: center;  
  display: table-cell;  
  vertical-align: middle;  
}

The html code is as follows:

<div class="content">  
  <img src="./4.jpg" alt="img" />  
</div>

Small bars on both sides of the title

Now we can use pseudo elements!

<div class="title">Title</div>

title {  
  color: #e1767c;  
  font-size: 0.3rem;  
  position: relative;  
  
  &:before,  
  &:after {  
    content: "";  
    position: absolute;  
    display: block;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate3d(-50%, -50%, 0);  
    transform: translate3d(-50%, -50%, 0);  
    border-top: 0.02rem solid #e1767c;  
    width: 0.4rem;  
  }  
  &:before {  
    margin-left: -1.2rem;  
  }  
  &:after {  
    margin-left: 1.2rem;  
  }  
}

Drawing elements with border attribute

In addition to being a simple drawing border, border can also draw arbitrary polygons such as triangles, trapezoids and stars. The following are two triangles and trapezoids drawn

<div class="triangle1"></div>  
<div class="triangle2"></div>  
<div class="trapezoid"></div>

.triangle1 {  
  /*Acute triangle*/  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 100px solid #249ff1;  
  border-left: 30px solid transparent;  
  border-right: 100px solid transparent;  
}  
.triangle2 {  
  /*right triangle*/  
  width: 0;  
  height: 0;  
  border-top: 80px solid transparent;  
  border-bottom: 80px solid #ff5b01;  
  border-left: 50px solid #ff5b01;  
  border-right: 50px solid transparent;  
}  
.trapezoid {  
  /*Trapezoid*/  
  width: 0;  
  height: 0;  
  border-top: none;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #13dbed;  
  border-left: 80px solid #13dbed;  
}

Drawing elements with border radius

Border radius is mainly used to draw the shapes of dots, circles, ellipses, rounded rectangles and so on. Here are two simple drawings.

<div class="circle"></div>  
<div class="ellipse"><div></div></div>

.circle,  
.ellipse {  
  width: 100px;  
  height: 100px;  
  background: #249ff1;  
  border-radius: 50%;  
}  
.ellipse {  
  width: 150px;  
  background: #ff9e01;  
}

But the border radius attribute can actually set up to 8 values, and many unexpected images can be obtained by changing 8 values

Drawing elements with box shadow

Three values: h-shadow v-shadow color
Four values: h-shadow v-shadow blur color
5 values: h-shadow v-shadow blur spread color
6 values: h-shadow v-shadow blur spread color inset

<div class="plus"></div>  
<div class="target"></div>

.plus {  
  width: 30px;  
  height: 30px;  
  margin-left: 50px; /*Because box shadow does not occupy space, it is often necessary to add margin to correct the position*/  
  background: #000;  
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;  
}  
.target {  
  width: 30px;  
  height: 30px;  
  background: red;  
  border-radius: 50%;  
  margin-left: 50px;  
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;  
}

Using CSS gradients to draw icons

The gradient property of CSS3 is very powerful. In theory, any graph can be drawn by gradient. The characteristics and use of gradient are enough to write a long article. Here is an example

<div class="gradient"></div>

.gradient {  
  position: relative;  
  width: 300px;  
  height: 300px;  
  border-radius: 50%;  
  background-color: silver;  
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),  
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(  
      335deg,  
      #b00 23px,  
      transparent 23px  
    ), linear-gradient(155deg, #d00 23px, transparent 23px);  
  background-size: 58px 58px;  
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;  
}

glass

.cup {  
  display: inline-block;  
  width: 0.9em;  
  height: 0.4em;  
  border: 0.25em solid;  
  border-bottom: 1.1em solid;  
  border-radius: 0 0 0.25em 0.25em;  
}  
cup:before {  
  position: absolute;  
  right: -0.6em;  
  top: 0;  
  width: 0.3em;  
  height: 0.8em;  
  border: 0.25em solid;  
  border-left: none;  
  border-radius: 0 0.25em 0.25em 0;  
  content: "";  
}

heart-shaped

.heart {  
  display: inline-block;  
  margin-top: 1.5em;  
  width: 50px;  
  height: 50px;  
  background: green;  
}  
.heart:before,  
.heart:after {  
  position: absolute;  
  width: 1em;  
  height: 1.6em;  
  background: #000;  
  border-radius: 50% 50% 0 0;  
  content: "";  
  bottom: 0;  
}  
.heart:before {  
  -webkit-transform: rotate(45deg);  
  -webkit-transform-origin: 100% 100%;  
  right: 0;  
  background: red;  
  opacity: 0.5;  
  z-index: 5;  
}  
.:after {  
  -webkit-transform: rotate(-45deg);  
  -webkit-transform-origin: 0 100%;  
  left: 0;  
  opacity: 0.8;  
}

camera

.camera {  
  display: inline-block;  
  border-style: solid;  
  border-width: 0.65em 0.9em;  
  border-radius: 0.1em;  
}  
.camera:before {  
  position: absolute;  
  top: -0.3em;  
  left: -0.3em;  
  width: 0.4em;  
  height: 0.4em;  
  border-radius: 50%;  
  border: 0.1em solid #fff;  
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;  
  content: "";  
}  
.camera:after {  
  position: absolute;  
  top: -0.5em;  
  left: 0.5em;  
  width: 0.2em;  
  border-top: 0.125em solid #fff;  
  content: "";  
}

Moon

.moon {  
  display: inline-block;  
  height: 1.5em;  
  width: 1.5em;  
  box-shadow: inset -0.4em 0 0;  
  border-radius: 2em;  
  transform: rotate(20deg);  
}

Floating class

General float list float image float

.float-left {  
  float: left;  
}  
.float-right {  
  float: right;  
}  
.float-li li,/*Defined on li parent element or ancestor element*/ li.float-li {  
  float: left;  
}  
.float-img img,/*Defined on img parent element or ancestor element*/ img.float-li {  
  float: left;  
}  
.float-span span,/*Defined on span parent element or ancestor element*/ span.float-span {  
  float: right;  
}

Background image embedding and positioning

.bg-img {  
  background-image: url("../img/bg.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg01-img {  
  background-image: url("../img/bg01.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg02-img {  
  background-image: url("../img/bg02.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg03-img {  
  background-image: url("../img/bg03.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg04-img {  
  background-image: url("../img/bg04.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}

Inheritance class

.inherit-width {  
  width: inherit;  
}  
.inherit-min-width {  
  min-width: inherit;  
}  
.inherit-height {  
  height: inherit;  
}  
.inherit-min-height {  
  min-height: inherit;  
}  
.inherit-color {  
  color: inherit;  
}

Text indentation

.text-indent {  
  text-indent: 2rem;  
}  
/*16px*/  
.text-indent-xs {  
  text-indent: 1.5rem;  
}  
/*12px*/  
.text-indent-sm {  
  text-indent: 1.7rem;  
}  
/*14px*/  
.text-indent-md {  
  text-indent: 2rem;  
}  
/*18px*/  
.text-indent-lg {  
  text-indent: 2.4rem;  
}  
/*20px*/

Row height

.line-height-xs {  
  line-height: 1.3rem;  
}  
.line-height-sm {  
  line-height: 1.5rem;  
}  
.line-height-md {  
  line-height: 1.7rem;  
}  
.line-height-lg {  
  line-height: 2rem;  
}  
  
.line-height-25x {  
  line-height: 25px;  
}  
.line-height-30x {  
  line-height: 30px;  
}

ul indentation

.ul-indent-xs {  
  margin-left: 0.5rem;  
}  
.ul-indent-sm {  
  margin-left: 1rem;  
}  
.ul-indent-md {  
  margin-left: 1.5rem;  
}  
.ul-indent-lg {  
  margin-left: 2rem;  
}  
.ol-list,  
.ul-list {  
  list-style: disc;  
}

Text truncation

.truncate {  
  max-width: 100%;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  
.hide {  
  display: none;  
}

Picture and video specifications

.img-max,  
.video-max {  
  width: 100%;  
  height: auto;  
}  
/*display Display mode*/  
.inline {  
  display: inline;  
}  
.inline-block {  
  display: inline-block;  
}  
.block {  
  display: block;  
}

Border style

.border-xs-black {  
  border: 1px solid #000;  
}  
.border-sm-black {  
  border: 2px solid #000;  
}  
.border-md-black {  
  border: 3px solid #000;  
}  
.border-lg-black {  
  border: 5px solid #000;  
}  
  
.border-xs-gray {  
  border: 1px solid #9c9c9c;  
}  
.border-sm-gray {  
  border: 2px solid #9c9c9c;  
}  
.border-md-gray {  
  border: 3px solid #9c9c9c;  
}  
.border-lg-gray {  
  border: 5px solid #9c9c9c;  
}

background color

.bg-white {  
  background: #fff !important;  
}  
.bg-black {  
  background: #1b1c1d !important;  
}  
.bg-gray {  
  background: #767676 !important;  
}  
.bg-light-gray {  
  background: #f8f7f7 !important;  
}  
.bg-yellow {  
  background: #fbbd08 !important;  
}  
.bg-orange {  
  background: #f2711c !important;  
}  
.bg-red {  
  background: #db2828 !important;  
}  
.bg-olive {  
  background: #b5cc18 !important;  
}  
.bg-green {  
  background: #21ba45 !important;  
}  
.bg-teal {  
  background: #00b5ad !important;  
}  
.bg-darkGreen {  
  background: #19a97b !important;  
}  
.bg-threeGreen {  
  background: #097c25 !important;  
}  
.bg-blue {  
  background: #2185d0 !important;  
}  
.bg-violet {  
  background: #6435c9 !important;  
}  
.bg-purple {  
  background: #a333c8 !important;  
}  
.bg-brown {  
  background: #a5673f !important;  
}

Divider presets

hr,  
.hr-xs-Silver,  
.hr-sm-black,  
.hr-sm-Silver,  
.hr-xs-gray,  
.hr-sm-gray {  
  margin: 20px 0;  
}  
hr {  
  border: none;  
  border-top: 1px solid #000;  
}  
.hr-xs-Silver {  
  border: none;  
  border-top: 1px solid #c0c0c0;  
}  
.hr-sm-black {  
  border: none;  
  border-top: 2px solid #000;  
}  
.hr-sm-Silver {  
  border: none;  
  border-top: 2px solid #c0c0c0;  
}  
.hr-xs-gray {  
  border: none;  
  border-top: 1px solid #767676;  
}  
.hr-sm-gray {  
  border: none;  
  border-top: 2px solid #767676;  
}

hover effect of mouse a label

.hover-red a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-red:hover {  
  color: red;  
} /*Add the class name for the a tag separately*/  
.hover-yellow a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-yellow:hover {  
  color: #ffd700;  
} /*Add the class name for the a tag separately*/  
.hover-green a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-green:hover {  
  color: #70aa39;  
} /*Add the class name for the a tag separately*/  
.hover-blue a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-blue:hover {  
  color: blue;  
} /*Add the class name for the a tag separately*/  
.hover-gray a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-gray:hover {  
  color: #9c9c9c;  
} /*Add the class name for the a tag separately*/  
.underline a:hover,  
a.underline:hover {  
  text-decoration: underline;  
}

Shadow effect

.shadow-text-xs {  
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);  
} /*Intelligent compatible ie10 or above is not considered temporarily*/  
  
.shadow-xs {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */  
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */  
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */  
}  
.shadow-sm {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */  
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */  
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */  
}  
.shadow-md {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */  
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */  
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */  
}  
.shadow-lg {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */  
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */  
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */  
}

fillet

.border-radius-xs {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  
.border-radius-sm {  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-md {  
  -webkit-border-radius: 7px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-lg {  
  -webkit-border-radius: 9px;  
  -moz-border-radius: 9px;  
  border-radius: 9px;  
}

summary

If articles and notes can give you a little help or inspiration, please don't be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Clear floating

// Clear floating  
.clearfix:after {  
  content: "\00A0";  
  display: block;  
  visibility: hidden;  
  width: 0;  
  height: 0;  
  clear: both;  
  font-size: 0;  
  line-height: 0;  
  overflow: hidden;  
}  
.clearfix {  
  zoom: 1;  
}

Vertical horizontal center

Absolute positioning mode and known width and height

position: absolute;  
top: 50%;  
left: 50%;  
margin-top: -3em;  
margin-left: -7em;  
width: 14em;  
height: 6em;

Absolute positioning + unknown width and height + translate

position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
//Browser prefix required

flex easy horizontal vertical center (unknown width and height)

display: flex;  
align-items: center;  
justify-content: center;

Ellipsis at the end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width, suitable for single line display

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

Variable width, suitable for multi line and mobile display

overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 3;  
-webkit-box-orient: vertical;

Fuzzy effect of manufacturing text

We can do this when we want to create a fuzzy effect on the text

color: transparent;  
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Simple loading effect with animation

Let's implement a very simple loading effect

.loading:after {  
  display: inline-block;  
  overflow: hidden;  
  vertical-align: bottom;  
  content: "\2026";  
  -webkit-animation: ellipsis 2s infinite;  
}  
  
// Animation part  
@-webkit-keyframes ellipsis {  
  from {  
    width: 2px;  
  }  
  to {  
    width: 15px;  
  }  
}

Custom text selection style

// Note that you can only modify these two attributes font color select background color  
  
element::selection {  
  color: green;  
  background-color: pink;  
}  
element::-moz-selection {  
  color: green;  
  background-color: pink;  
}

Top corner sticker effect

Now let's go step by step to finish the leftmost effect

html

<div class="wrap">  
  <div class="ribbon">  
    <a href="#">Fork me on GitHub</a>  
  </div>  
</div>

css

/* Several settings of outer container  */  
.wrap {  
  width: 160px;  
  height: 160px;  
  overflow: hidden;  
  position: relative;  
  background-color: #f3f3f3;  
}  
  
.ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  position: absolute;  
  /* shadom */  
  -webkit-box-shadow: 0 0 10px #888;  
  -moz-box-shadow: 0 0 10px #888;  
  box-shadow: 0 0 10px #888;  
  /* rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* position */  
  left: -50px;  
  top: 40px;  
}  
  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* shadow */  
  text-shadow: 0 0 5px #444;  
}

input placeholder

When we set the placeholder property for some input types, sometimes we need to change the default style.

input::-webkit-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-moz-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-ms-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}

Mobile terminal can click the default border where the element goes

On mobile browsers, when you click a link or a clickable element defined by Javascript, a blue border will appear. To be honest, it's disgusting. How to remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

To achieve the effect similar to the drop cap in word, you can use the following code

element:first-letter {  
  float: left;  
  color: green;  
  font-size: 30px;  
}

Mistress triangle

We can use small triangles in many places. Next, let's draw triangles in four directions

.triangle {  
  /* Basic style */  
  border: solid 10px transparent;  
}  
/*lower*/  
.triangle.bottom {  
  border-top-color: green;  
}  
/*upper*/  
.triangle.top {  
  border-bottom-color: green;  
}  
/*Left*/  
.triangle.top {  
  border-right-color: green;  
}  
/*right*/  
.triangle.top {  
  border-left-color: green;  
}

Mouse hand type

In general, we want to add a mouse hand shape to the following elements

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],  
input[type="submit"],  
input[type="image"],  
input[type="button"],  
label[for],  
select,  
button {  
  cursor: pointer;  
}

Shielding the highlight effect of elements in Webkit mobile browser

When visiting the mobile website, you will find some gray boxes around the selected elements. Use the following code to block this style

-webkit-touch-callout: none;  
-webkit-user-select: none;  
-khtml-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;

Remove the default margin and padding for browsers with common tags

pre,code,legend,fieldset,blockquote … Etc. tags are not very common, so they are not listed one by one. If they are used in the project, you can write them separately

body,  
p,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
dl,  
dd,  
ul,  
ol,  
th,  
td,  
button,  
figure,  
input,  
textarea,  
form {  
  margin: 0;  
  padding: 0;  
}

Unified input, select, textarea width

The width of box models of input, select and textarea in different browsers is calculated differently, and they are unified into the most common content box

input,  
select,  
textarea {  
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;  
  box-sizing: content-box;  
}  
  
table {  
  /*table The distance between borders of adjacent cells is set to 0*/  
  border-spacing: 0;  
  /*By default, setting border to tr has no effect. If table has set border to merge mode: "border collapse: collapse;", it is OK*/  
  border-collapse: collapse;  
}

Remove the default border of some browser elements

acronym,fieldset … If other tags are not very common, they will not be listed one by one; if they are used in the project, they can be written separately

img,  
input,  
button,  
textarea {  
  border: none;  
  -webkit-appearance: none;  
}  
  
input {  
  /*Because input does not inherit the centering style of the parent element by default, set "text align: inherit"*/  
  text-align: inherit;  
}  
  
textarea {  
  /*textarea No zoom by default*/  
  resize: none;  
}

Cancel element outline style

Because some properties of the following elements do not inherit the parent node style, these properties of these elements are declared as properties of the parent element

a,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
input,  
select,  
button,  
option,  
textarea,  
optgroup {  
  font-family: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  line-height: inherit;  
  color: inherit;  
  outline: none;  
}

Remove the default text decoration for hyperlink elements

In addition, the dash and underline of del and ins labels are still very good, so they will not be removed

a {  
  text-decoration: none;  
}  
  
ol,  
ul {  
  /*In development, the list of UI design is too different from the original style, so the default list style of ol and ul is cancelled directly*/  
  list-style: none;  
}  
  
button,  
input[type="submit"],  
input[type="button"] {  
  /*The mouse is in the shape of "small hand", indicating that it can be clicked*/  
  cursor: pointer;  
}  
  
input::-moz-focus-inner {  
  /*The default "padding, border" when the input focus of some versions of Firefox is canceled*/  
  padding: 0;  
  border: 0;  
}

Cancel the action button of some browser digital input controls

input[type="number"] {  
  -moz-appearance: textfield;  
}  
  
input[type="number"]::-webkit-inner-spin-button,  
input[type="number"]::-webkit-outer-spin-button {  
  margin: 0;  
  -webkit-appearance: none;  
}

Enter the color setting of the control placeholder

input::-webkit-input-placeholder,  
textarea::-webkit-input-placeholder {  
  color: #999;  
}  
  
input:-moz-placeholder,  
textarea:-moz-placeholder {  
  color: #999;  
}  
  
input::-moz-placeholder,  
textarea::-moz-placeholder {  
  color: #999;  
}  
  
input:-ms-input-placeholder,  
textarea:-ms-input-placeholder {  
  color: #999;  
}  
  
template {  
  /*Because some browsing template s will be displayed, you need to hide*/  
  display: none;  
}

Position: short for fixed

.pf {  
  position: fixed;  
  /*chrome Kernel browser position: fixed to prevent jitter*/  
  -webkit-transform: translateZ(0);  
}

Use the principle of absolute positioning, width and height lifting, and center the element

.middle {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  margin: auto;  
}

Centering elements vertically with relative positioning in CSS3

.v-middle {  
  position: relative;  
  top: 50%;  
  -webkit-transform: -webkit-translateY(-50%);  
  -moz-transform: -moz-translateY(-50%);  
  -o-transform: -o-translateY(-50%);  
  transform: translateY(-50%);  
}

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

.bb {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

Single line text overflow display ellipsis "to = = > text overflow"

.to {  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

Initialize style

Different browsers have different default styles for each label. Sometimes we don't want to use the default style given by the browser. We can use reset.css to remove the default style

body,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
hr,  
p,  
blockquote,  
dl,  
dt,  
dd,  
ul,  
ol,  
li,  
pre,  
form,  
fieldset,  
legend,  
button,  
input,  
textarea,  
th,  
td {  
  margin: 0;  
  padding: 0;  
}  
body,  
button,  
input,  
select,  
textarea {  
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;  
}  
h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
  font-size: 100%;  
}  
address,  
cite,  
dfn,  
em,  
var {  
  font-style: normal;  
}  
code,  
kbd,  
pre,  
samp {  
  font-family: couriernew, courier, monospace;  
}  
small {  
  font-size: 12px;  
}  
ul,  
ol {  
  list-style: none;  
}  
a {  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
sup {  
  vertical-align: text-top;  
}  
sub {  
  vertical-align: text-bottom;  
}  
legend {  
  color: #000;  
}  
fieldset,  
img {  
  border: 0;  
}  
button,  
input,  
select,  
textarea {  
  font-size: 100%;  
}  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}

Force wrap / Auto wrap / force no wrap

/* Force no wrapping */  
div {  
  white-space: nowrap;  
}  
  
/* Automatic line feed */  
div {  
  word-wrap: break-word;  
  word-break: normal;  
}  
  
/* Force English word break */  
div {  
  word-break: break-all;  
}

Style of table boundary

table {  
  border: 1px solid #000;  
  padding: 0;  
  border-collapse: collapse;  
  table-layout: fixed;  
  margin-top: 10px;  
}  
table td {  
  height: 30px;  
  border: 1px solid #000;  
  background: #fff;  
  font-size: 15px;  
  padding: 3px 3px 3px 8px;  
  color: #000;  
  width: 160px;  
}

Absolute positioning and margin

When we know in advance the length and width of the element to be centered, we can use this method:

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  width: 160px;  
  height: 100px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-left: -80px; /* Half the width */  
  margin-top: -50px; /* Half the height */  
}

Absolute positioning and transform

When the elements to be centered are variable in width and height, we can use transform to offset the elements.

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);  
  text-align: center;  
}

line-height

Line height is actually row height. We can adjust the layout with row height!

However, there is a big disadvantage of this scheme: the copy must be single line, and if there are multiple lines, there will be problems with the set line height.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  line-height: 200px;  
}

table layout

Set display: table for the container element and display: table cell for the current element:

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: table;  
}  
.content {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center;  
}

flex layout

At the same time, the flex layout can also replace the problem that the line height scheme is not centered in some Android models.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
.content {  
  background-color: #ccc;  
  text-align: center;  
}

Picture top bottom left right center

.content {  
  width: 400px;  
  height: 400px;  
  border: 1px solid #ccc;  
  text-align: center;  
  display: table-cell;  
  vertical-align: middle;  
}

The html code is as follows:

<div class="content">  
  <img src="./4.jpg" alt="img" />  
</div>

Small bars on both sides of the title

Now we can use pseudo elements!

<div class="title">Title</div>

title {  
  color: #e1767c;  
  font-size: 0.3rem;  
  position: relative;  
  
  &:before,  
  &:after {  
    content: "";  
    position: absolute;  
    display: block;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate3d(-50%, -50%, 0);  
    transform: translate3d(-50%, -50%, 0);  
    border-top: 0.02rem solid #e1767c;  
    width: 0.4rem;  
  }  
  &:before {  
    margin-left: -1.2rem;  
  }  
  &:after {  
    margin-left: 1.2rem;  
  }  
}

Drawing elements with border attribute

In addition to being a simple drawing border, border can also draw arbitrary polygons such as triangles, trapezoids and stars. The following are two triangles and trapezoids drawn

<div class="triangle1"></div>  
<div class="triangle2"></div>  
<div class="trapezoid"></div>

.triangle1 {  
  /*Acute triangle*/  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 100px solid #249ff1;  
  border-left: 30px solid transparent;  
  border-right: 100px solid transparent;  
}  
.triangle2 {  
  /*right triangle*/  
  width: 0;  
  height: 0;  
  border-top: 80px solid transparent;  
  border-bottom: 80px solid #ff5b01;  
  border-left: 50px solid #ff5b01;  
  border-right: 50px solid transparent;  
}  
.trapezoid {  
  /*Trapezoid*/  
  width: 0;  
  height: 0;  
  border-top: none;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #13dbed;  
  border-left: 80px solid #13dbed;  
}

Drawing elements with border radius

Border radius is mainly used to draw the shapes of dots, circles, ellipses, rounded rectangles and so on. Here are two simple drawings.

<div class="circle"></div>  
<div class="ellipse"><div></div></div>

.circle,  
.ellipse {  
  width: 100px;  
  height: 100px;  
  background: #249ff1;  
  border-radius: 50%;  
}  
.ellipse {  
  width: 150px;  
  background: #ff9e01;  
}

But the border radius attribute can actually set up to 8 values, and many unexpected images can be obtained by changing 8 values

Drawing elements with box shadow

Three values: h-shadow v-shadow color
Four values: h-shadow v-shadow blur color
5 values: h-shadow v-shadow blur spread color
6 values: h-shadow v-shadow blur spread color inset

<div class="plus"></div>  
<div class="target"></div>

.plus {  
  width: 30px;  
  height: 30px;  
  margin-left: 50px; /*Because box shadow does not occupy space, it is often necessary to add margin to correct the position*/  
  background: #000;  
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;  
}  
.target {  
  width: 30px;  
  height: 30px;  
  background: red;  
  border-radius: 50%;  
  margin-left: 50px;  
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;  
}

Using CSS gradients to draw icons

The gradient property of CSS3 is very powerful. In theory, any graph can be drawn by gradient. The characteristics and use of gradient are enough to write a long article. Here is an example

<div class="gradient"></div>

.gradient {  
  position: relative;  
  width: 300px;  
  height: 300px;  
  border-radius: 50%;  
  background-color: silver;  
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),  
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(  
      335deg,  
      #b00 23px,  
      transparent 23px  
    ), linear-gradient(155deg, #d00 23px, transparent 23px);  
  background-size: 58px 58px;  
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;  
}

glass

.cup {  
  display: inline-block;  
  width: 0.9em;  
  height: 0.4em;  
  border: 0.25em solid;  
  border-bottom: 1.1em solid;  
  border-radius: 0 0 0.25em 0.25em;  
}  
cup:before {  
  position: absolute;  
  right: -0.6em;  
  top: 0;  
  width: 0.3em;  
  height: 0.8em;  
  border: 0.25em solid;  
  border-left: none;  
  border-radius: 0 0.25em 0.25em 0;  
  content: "";  
}

heart-shaped

.heart {  
  display: inline-block;  
  margin-top: 1.5em;  
  width: 50px;  
  height: 50px;  
  background: green;  
}  
.heart:before,  
.heart:after {  
  position: absolute;  
  width: 1em;  
  height: 1.6em;  
  background: #000;  
  border-radius: 50% 50% 0 0;  
  content: "";  
  bottom: 0;  
}  
.heart:before {  
  -webkit-transform: rotate(45deg);  
  -webkit-transform-origin: 100% 100%;  
  right: 0;  
  background: red;  
  opacity: 0.5;  
  z-index: 5;  
}  
.:after {  
  -webkit-transform: rotate(-45deg);  
  -webkit-transform-origin: 0 100%;  
  left: 0;  
  opacity: 0.8;  
}

camera

.camera {  
  display: inline-block;  
  border-style: solid;  
  border-width: 0.65em 0.9em;  
  border-radius: 0.1em;  
}  
.camera:before {  
  position: absolute;  
  top: -0.3em;  
  left: -0.3em;  
  width: 0.4em;  
  height: 0.4em;  
  border-radius: 50%;  
  border: 0.1em solid #fff;  
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;  
  content: "";  
}  
.camera:after {  
  position: absolute;  
  top: -0.5em;  
  left: 0.5em;  
  width: 0.2em;  
  border-top: 0.125em solid #fff;  
  content: "";  
}

Moon

.moon {  
  display: inline-block;  
  height: 1.5em;  
  width: 1.5em;  
  box-shadow: inset -0.4em 0 0;  
  border-radius: 2em;  
  transform: rotate(20deg);  
}

Floating class

General float list float image float

.float-left {  
  float: left;  
}  
.float-right {  
  float: right;  
}  
.float-li li,/*Defined on li parent element or ancestor element*/ li.float-li {  
  float: left;  
}  
.float-img img,/*Defined on img parent element or ancestor element*/ img.float-li {  
  float: left;  
}  
.float-span span,/*Defined on span parent element or ancestor element*/ span.float-span {  
  float: right;  
}

Background image embedding and positioning

.bg-img {  
  background-image: url("../img/bg.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg01-img {  
  background-image: url("../img/bg01.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg02-img {  
  background-image: url("../img/bg02.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg03-img {  
  background-image: url("../img/bg03.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg04-img {  
  background-image: url("../img/bg04.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}

Inheritance class

.inherit-width {  
  width: inherit;  
}  
.inherit-min-width {  
  min-width: inherit;  
}  
.inherit-height {  
  height: inherit;  
}  
.inherit-min-height {  
  min-height: inherit;  
}  
.inherit-color {  
  color: inherit;  
}

Text indentation

.text-indent {  
  text-indent: 2rem;  
}  
/*16px*/  
.text-indent-xs {  
  text-indent: 1.5rem;  
}  
/*12px*/  
.text-indent-sm {  
  text-indent: 1.7rem;  
}  
/*14px*/  
.text-indent-md {  
  text-indent: 2rem;  
}  
/*18px*/  
.text-indent-lg {  
  text-indent: 2.4rem;  
}  
/*20px*/

Row height

.line-height-xs {  
  line-height: 1.3rem;  
}  
.line-height-sm {  
  line-height: 1.5rem;  
}  
.line-height-md {  
  line-height: 1.7rem;  
}  
.line-height-lg {  
  line-height: 2rem;  
}  
  
.line-height-25x {  
  line-height: 25px;  
}  
.line-height-30x {  
  line-height: 30px;  
}

ul indentation

.ul-indent-xs {  
  margin-left: 0.5rem;  
}  
.ul-indent-sm {  
  margin-left: 1rem;  
}  
.ul-indent-md {  
  margin-left: 1.5rem;  
}  
.ul-indent-lg {  
  margin-left: 2rem;  
}  
.ol-list,  
.ul-list {  
  list-style: disc;  
}

Text truncation

.truncate {  
  max-width: 100%;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  
.hide {  
  display: none;  
}

Picture and video specifications

.img-max,  
.video-max {  
  width: 100%;  
  height: auto;  
}  
/*display Display mode*/  
.inline {  
  display: inline;  
}  
.inline-block {  
  display: inline-block;  
}  
.block {  
  display: block;  
}

Border style

.border-xs-black {  
  border: 1px solid #000;  
}  
.border-sm-black {  
  border: 2px solid #000;  
}  
.border-md-black {  
  border: 3px solid #000;  
}  
.border-lg-black {  
  border: 5px solid #000;  
}  
  
.border-xs-gray {  
  border: 1px solid #9c9c9c;  
}  
.border-sm-gray {  
  border: 2px solid #9c9c9c;  
}  
.border-md-gray {  
  border: 3px solid #9c9c9c;  
}  
.border-lg-gray {  
  border: 5px solid #9c9c9c;  
}

background color

.bg-white {  
  background: #fff !important;  
}  
.bg-black {  
  background: #1b1c1d !important;  
}  
.bg-gray {  
  background: #767676 !important;  
}  
.bg-light-gray {  
  background: #f8f7f7 !important;  
}  
.bg-yellow {  
  background: #fbbd08 !important;  
}  
.bg-orange {  
  background: #f2711c !important;  
}  
.bg-red {  
  background: #db2828 !important;  
}  
.bg-olive {  
  background: #b5cc18 !important;  
}  
.bg-green {  
  background: #21ba45 !important;  
}  
.bg-teal {  
  background: #00b5ad !important;  
}  
.bg-darkGreen {  
  background: #19a97b !important;  
}  
.bg-threeGreen {  
  background: #097c25 !important;  
}  
.bg-blue {  
  background: #2185d0 !important;  
}  
.bg-violet {  
  background: #6435c9 !important;  
}  
.bg-purple {  
  background: #a333c8 !important;  
}  
.bg-brown {  
  background: #a5673f !important;  
}

Divider presets

hr,  
.hr-xs-Silver,  
.hr-sm-black,  
.hr-sm-Silver,  
.hr-xs-gray,  
.hr-sm-gray {  
  margin: 20px 0;  
}  
hr {  
  border: none;  
  border-top: 1px solid #000;  
}  
.hr-xs-Silver {  
  border: none;  
  border-top: 1px solid #c0c0c0;  
}  
.hr-sm-black {  
  border: none;  
  border-top: 2px solid #000;  
}  
.hr-sm-Silver {  
  border: none;  
  border-top: 2px solid #c0c0c0;  
}  
.hr-xs-gray {  
  border: none;  
  border-top: 1px solid #767676;  
}  
.hr-sm-gray {  
  border: none;  
  border-top: 2px solid #767676;  
}

hover effect of mouse a label

.hover-red a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-red:hover {  
  color: red;  
} /*Add the class name for the a tag separately*/  
.hover-yellow a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-yellow:hover {  
  color: #ffd700;  
} /*Add the class name for the a tag separately*/  
.hover-green a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-green:hover {  
  color: #70aa39;  
} /*Add the class name for the a tag separately*/  
.hover-blue a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-blue:hover {  
  color: blue;  
} /*Add the class name for the a tag separately*/  
.hover-gray a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-gray:hover {  
  color: #9c9c9c;  
} /*Add the class name for the a tag separately*/  
.underline a:hover,  
a.underline:hover {  
  text-decoration: underline;  
}

Shadow effect

.shadow-text-xs {  
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);  
} /*Intelligent compatible ie10 or above is not considered temporarily*/  
  
.shadow-xs {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */  
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */  
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */  
}  
.shadow-sm {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */  
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */  
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */  
}  
.shadow-md {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */  
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */  
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */  
}  
.shadow-lg {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */  
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */  
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */  
}

fillet

.border-radius-xs {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  
.border-radius-sm {  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-md {  
  -webkit-border-radius: 7px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-lg {  
  -webkit-border-radius: 9px;  
  -moz-border-radius: 9px;  
  border-radius: 9px;  
}

summary

If articles and notes can give you a little help or inspiration, please don't be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Clear floating

// Clear floating  
.clearfix:after {  
  content: "\00A0";  
  display: block;  
  visibility: hidden;  
  width: 0;  
  height: 0;  
  clear: both;  
  font-size: 0;  
  line-height: 0;  
  overflow: hidden;  
}  
.clearfix {  
  zoom: 1;  
}

Vertical horizontal center

Absolute positioning mode and known width and height

position: absolute;  
top: 50%;  
left: 50%;  
margin-top: -3em;  
margin-left: -7em;  
width: 14em;  
height: 6em;

Absolute positioning + unknown width and height + translate

position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
//Browser prefix required

flex easy horizontal vertical center (unknown width and height)

display: flex;  
align-items: center;  
justify-content: center;

Ellipsis at the end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width, suitable for single line display

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

Variable width, suitable for multi line and mobile display

overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 3;  
-webkit-box-orient: vertical;

Fuzzy effect of manufacturing text

We can do this when we want to create a fuzzy effect on the text

color: transparent;  
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Simple loading effect with animation

Let's implement a very simple loading effect

.loading:after {  
  display: inline-block;  
  overflow: hidden;  
  vertical-align: bottom;  
  content: "\2026";  
  -webkit-animation: ellipsis 2s infinite;  
}  
  
// Animation part  
@-webkit-keyframes ellipsis {  
  from {  
    width: 2px;  
  }  
  to {  
    width: 15px;  
  }  
}

Custom text selection style

// Note that you can only modify these two attributes font color select background color  
  
element::selection {  
  color: green;  
  background-color: pink;  
}  
element::-moz-selection {  
  color: green;  
  background-color: pink;  
}

Top corner sticker effect

Now let's go step by step to finish the leftmost effect

html

<div class="wrap">  
  <div class="ribbon">  
    <a href="#">Fork me on GitHub</a>  
  </div>  
</div>

css

/* Several settings of outer container  */  
.wrap {  
  width: 160px;  
  height: 160px;  
  overflow: hidden;  
  position: relative;  
  background-color: #f3f3f3;  
}  
  
.ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  position: absolute;  
  /* shadom */  
  -webkit-box-shadow: 0 0 10px #888;  
  -moz-box-shadow: 0 0 10px #888;  
  box-shadow: 0 0 10px #888;  
  /* rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* position */  
  left: -50px;  
  top: 40px;  
}  
  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* shadow */  
  text-shadow: 0 0 5px #444;  
}

input placeholder

When we set the placeholder property for some input types, sometimes we need to change the default style.

input::-webkit-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-moz-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-ms-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}

Mobile terminal can click the default border where the element goes

On mobile browsers, when you click a link or a clickable element defined by Javascript, a blue border will appear. To be honest, it's disgusting. How to remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

To achieve the effect similar to the drop cap in word, you can use the following code

element:first-letter {  
  float: left;  
  color: green;  
  font-size: 30px;  
}

Mistress triangle

We can use small triangles in many places. Next, let's draw triangles in four directions

.triangle {  
  /* Basic style */  
  border: solid 10px transparent;  
}  
/*lower*/  
.triangle.bottom {  
  border-top-color: green;  
}  
/*upper*/  
.triangle.top {  
  border-bottom-color: green;  
}  
/*Left*/  
.triangle.top {  
  border-right-color: green;  
}  
/*right*/  
.triangle.top {  
  border-left-color: green;  
}

Mouse hand type

In general, we want to add a mouse hand shape to the following elements

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],  
input[type="submit"],  
input[type="image"],  
input[type="button"],  
label[for],  
select,  
button {  
  cursor: pointer;  
}

Shielding the highlight effect of elements in Webkit mobile browser

When visiting the mobile website, you will find some gray boxes around the selected elements. Use the following code to block this style

-webkit-touch-callout: none;  
-webkit-user-select: none;  
-khtml-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;

Remove the default margin and padding for browsers with common tags

pre,code,legend,fieldset,blockquote … Etc. tags are not very common, so they are not listed one by one. If they are used in the project, you can write them separately

body,  
p,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
dl,  
dd,  
ul,  
ol,  
th,  
td,  
button,  
figure,  
input,  
textarea,  
form {  
  margin: 0;  
  padding: 0;  
}

Unified input, select, textarea width

The width of box models of input, select and textarea in different browsers is calculated differently, and they are unified into the most common content box

input,  
select,  
textarea {  
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;  
  box-sizing: content-box;  
}  
  
table {  
  /*table The distance between borders of adjacent cells is set to 0*/  
  border-spacing: 0;  
  /*By default, setting border to tr has no effect. If table has set border to merge mode: "border collapse: collapse;", it is OK*/  
  border-collapse: collapse;  
}

Remove the default border of some browser elements

acronym,fieldset … If other tags are not very common, they will not be listed one by one; if they are used in the project, they can be written separately

img,  
input,  
button,  
textarea {  
  border: none;  
  -webkit-appearance: none;  
}  
  
input {  
  /*Because input does not inherit the centering style of the parent element by default, set "text align: inherit"*/  
  text-align: inherit;  
}  
  
textarea {  
  /*textarea No zoom by default*/  
  resize: none;  
}

Cancel element outline style

Because some properties of the following elements do not inherit the parent node style, these properties of these elements are declared as properties of the parent element

a,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
input,  
select,  
button,  
option,  
textarea,  
optgroup {  
  font-family: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  line-height: inherit;  
  color: inherit;  
  outline: none;  
}

Remove the default text decoration for hyperlink elements

In addition, the dash and underline of del and ins labels are still very good, so they will not be removed

a {  
  text-decoration: none;  
}  
  
ol,  
ul {  
  /*In development, the list of UI design is too different from the original style, so the default list style of ol and ul is cancelled directly*/  
  list-style: none;  
}  
  
button,  
input[type="submit"],  
input[type="button"] {  
  /*The mouse is in the shape of "small hand", indicating that it can be clicked*/  
  cursor: pointer;  
}  
  
input::-moz-focus-inner {  
  /*The default "padding, border" when the input focus of some versions of Firefox is canceled*/  
  padding: 0;  
  border: 0;  
}

Cancel the action button of some browser digital input controls

input[type="number"] {  
  -moz-appearance: textfield;  
}  
  
input[type="number"]::-webkit-inner-spin-button,  
input[type="number"]::-webkit-outer-spin-button {  
  margin: 0;  
  -webkit-appearance: none;  
}

Enter the color setting of the control placeholder

input::-webkit-input-placeholder,  
textarea::-webkit-input-placeholder {  
  color: #999;  
}  
  
input:-moz-placeholder,  
textarea:-moz-placeholder {  
  color: #999;  
}  
  
input::-moz-placeholder,  
textarea::-moz-placeholder {  
  color: #999;  
}  
  
input:-ms-input-placeholder,  
textarea:-ms-input-placeholder {  
  color: #999;  
}  
  
template {  
  /*Because some browsing template s will be displayed, you need to hide*/  
  display: none;  
}

Position: short for fixed

.pf {  
  position: fixed;  
  /*chrome Kernel browser position: fixed to prevent jitter*/  
  -webkit-transform: translateZ(0);  
}

Use the principle of absolute positioning, width and height lifting, and center the element

.middle {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  margin: auto;  
}

Centering elements vertically with relative positioning in CSS3

.v-middle {  
  position: relative;  
  top: 50%;  
  -webkit-transform: -webkit-translateY(-50%);  
  -moz-transform: -moz-translateY(-50%);  
  -o-transform: -o-translateY(-50%);  
  transform: translateY(-50%);  
}

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

.bb {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

Single line text overflow display ellipsis "to = = > text overflow"

.to {  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

Initialize style

Different browsers have different default styles for each label. Sometimes we don't want to use the default style given by the browser. We can use reset.css to remove the default style

body,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
hr,  
p,  
blockquote,  
dl,  
dt,  
dd,  
ul,  
ol,  
li,  
pre,  
form,  
fieldset,  
legend,  
button,  
input,  
textarea,  
th,  
td {  
  margin: 0;  
  padding: 0;  
}  
body,  
button,  
input,  
select,  
textarea {  
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;  
}  
h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
  font-size: 100%;  
}  
address,  
cite,  
dfn,  
em,  
var {  
  font-style: normal;  
}  
code,  
kbd,  
pre,  
samp {  
  font-family: couriernew, courier, monospace;  
}  
small {  
  font-size: 12px;  
}  
ul,  
ol {  
  list-style: none;  
}  
a {  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
sup {  
  vertical-align: text-top;  
}  
sub {  
  vertical-align: text-bottom;  
}  
legend {  
  color: #000;  
}  
fieldset,  
img {  
  border: 0;  
}  
button,  
input,  
select,  
textarea {  
  font-size: 100%;  
}  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}

Force wrap / Auto wrap / force no wrap

/* Force no wrapping */  
div {  
  white-space: nowrap;  
}  
  
/* Automatic line feed */  
div {  
  word-wrap: break-word;  
  word-break: normal;  
}  
  
/* Force English word break */  
div {  
  word-break: break-all;  
}

Style of table boundary

table {  
  border: 1px solid #000;  
  padding: 0;  
  border-collapse: collapse;  
  table-layout: fixed;  
  margin-top: 10px;  
}  
table td {  
  height: 30px;  
  border: 1px solid #000;  
  background: #fff;  
  font-size: 15px;  
  padding: 3px 3px 3px 8px;  
  color: #000;  
  width: 160px;  
}

Absolute positioning and margin

When we know in advance the length and width of the element to be centered, we can use this method:

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  width: 160px;  
  height: 100px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-left: -80px; /* Half the width */  
  margin-top: -50px; /* Half the height */  
}

Absolute positioning and transform

When the elements to be centered are variable in width and height, we can use transform to offset the elements.

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);  
  text-align: center;  
}

line-height

Line height is actually row height. We can adjust the layout with row height!

However, there is a big disadvantage of this scheme: the copy must be single line, and if there are multiple lines, there will be problems with the set line height.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  line-height: 200px;  
}

table layout

Set display: table for the container element and display: table cell for the current element:

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: table;  
}  
.content {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center;  
}

flex layout

At the same time, the flex layout can also replace the problem that the line height scheme is not centered in some Android models.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
.content {  
  background-color: #ccc;  
  text-align: center;  
}

Picture top bottom left right center

.content {  
  width: 400px;  
  height: 400px;  
  border: 1px solid #ccc;  
  text-align: center;  
  display: table-cell;  
  vertical-align: middle;  
}

The html code is as follows:

<div class="content">  
  <img src="./4.jpg" alt="img" />  
</div>

Small bars on both sides of the title

Now we can use pseudo elements!

<div class="title">Title</div>

title {  
  color: #e1767c;  
  font-size: 0.3rem;  
  position: relative;  
  
  &:before,  
  &:after {  
    content: "";  
    position: absolute;  
    display: block;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate3d(-50%, -50%, 0);  
    transform: translate3d(-50%, -50%, 0);  
    border-top: 0.02rem solid #e1767c;  
    width: 0.4rem;  
  }  
  &:before {  
    margin-left: -1.2rem;  
  }  
  &:after {  
    margin-left: 1.2rem;  
  }  
}

Drawing elements with border attribute

In addition to being a simple drawing border, border can also draw arbitrary polygons such as triangles, trapezoids and stars. The following are two triangles and trapezoids drawn

<div class="triangle1"></div>  
<div class="triangle2"></div>  
<div class="trapezoid"></div>

.triangle1 {  
  /*Acute triangle*/  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 100px solid #249ff1;  
  border-left: 30px solid transparent;  
  border-right: 100px solid transparent;  
}  
.triangle2 {  
  /*right triangle*/  
  width: 0;  
  height: 0;  
  border-top: 80px solid transparent;  
  border-bottom: 80px solid #ff5b01;  
  border-left: 50px solid #ff5b01;  
  border-right: 50px solid transparent;  
}  
.trapezoid {  
  /*Trapezoid*/  
  width: 0;  
  height: 0;  
  border-top: none;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #13dbed;  
  border-left: 80px solid #13dbed;  
}

Drawing elements with border radius

Border radius is mainly used to draw the shapes of dots, circles, ellipses, rounded rectangles and so on. Here are two simple drawings.

<div class="circle"></div>  
<div class="ellipse"><div></div></div>

.circle,  
.ellipse {  
  width: 100px;  
  height: 100px;  
  background: #249ff1;  
  border-radius: 50%;  
}  
.ellipse {  
  width: 150px;  
  background: #ff9e01;  
}

But the border radius attribute can actually set up to 8 values, and many unexpected images can be obtained by changing 8 values

Drawing elements with box shadow

Three values: h-shadow v-shadow color
Four values: h-shadow v-shadow blur color
5 values: h-shadow v-shadow blur spread color
6 values: h-shadow v-shadow blur spread color inset

<div class="plus"></div>  
<div class="target"></div>

.plus {  
  width: 30px;  
  height: 30px;  
  margin-left: 50px; /*Because box shadow does not occupy space, it is often necessary to add margin to correct the position*/  
  background: #000;  
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;  
}  
.target {  
  width: 30px;  
  height: 30px;  
  background: red;  
  border-radius: 50%;  
  margin-left: 50px;  
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;  
}

Using CSS gradients to draw icons

The gradient property of CSS3 is very powerful. In theory, any graph can be drawn by gradient. The characteristics and use of gradient are enough to write a long article. Here is an example

<div class="gradient"></div>

.gradient {  
  position: relative;  
  width: 300px;  
  height: 300px;  
  border-radius: 50%;  
  background-color: silver;  
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),  
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(  
      335deg,  
      #b00 23px,  
      transparent 23px  
    ), linear-gradient(155deg, #d00 23px, transparent 23px);  
  background-size: 58px 58px;  
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;  
}

glass

.cup {  
  display: inline-block;  
  width: 0.9em;  
  height: 0.4em;  
  border: 0.25em solid;  
  border-bottom: 1.1em solid;  
  border-radius: 0 0 0.25em 0.25em;  
}  
cup:before {  
  position: absolute;  
  right: -0.6em;  
  top: 0;  
  width: 0.3em;  
  height: 0.8em;  
  border: 0.25em solid;  
  border-left: none;  
  border-radius: 0 0.25em 0.25em 0;  
  content: "";  
}

heart-shaped

.heart {  
  display: inline-block;  
  margin-top: 1.5em;  
  width: 50px;  
  height: 50px;  
  background: green;  
}  
.heart:before,  
.heart:after {  
  position: absolute;  
  width: 1em;  
  height: 1.6em;  
  background: #000;  
  border-radius: 50% 50% 0 0;  
  content: "";  
  bottom: 0;  
}  
.heart:before {  
  -webkit-transform: rotate(45deg);  
  -webkit-transform-origin: 100% 100%;  
  right: 0;  
  background: red;  
  opacity: 0.5;  
  z-index: 5;  
}  
.:after {  
  -webkit-transform: rotate(-45deg);  
  -webkit-transform-origin: 0 100%;  
  left: 0;  
  opacity: 0.8;  
}

camera

.camera {  
  display: inline-block;  
  border-style: solid;  
  border-width: 0.65em 0.9em;  
  border-radius: 0.1em;  
}  
.camera:before {  
  position: absolute;  
  top: -0.3em;  
  left: -0.3em;  
  width: 0.4em;  
  height: 0.4em;  
  border-radius: 50%;  
  border: 0.1em solid #fff;  
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;  
  content: "";  
}  
.camera:after {  
  position: absolute;  
  top: -0.5em;  
  left: 0.5em;  
  width: 0.2em;  
  border-top: 0.125em solid #fff;  
  content: "";  
}

Moon

.moon {  
  display: inline-block;  
  height: 1.5em;  
  width: 1.5em;  
  box-shadow: inset -0.4em 0 0;  
  border-radius: 2em;  
  transform: rotate(20deg);  
}

Floating class

General float list float image float

.float-left {  
  float: left;  
}  
.float-right {  
  float: right;  
}  
.float-li li,/*Defined on li parent element or ancestor element*/ li.float-li {  
  float: left;  
}  
.float-img img,/*Defined on img parent element or ancestor element*/ img.float-li {  
  float: left;  
}  
.float-span span,/*Defined on span parent element or ancestor element*/ span.float-span {  
  float: right;  
}

Background image embedding and positioning

.bg-img {  
  background-image: url("../img/bg.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg01-img {  
  background-image: url("../img/bg01.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg02-img {  
  background-image: url("../img/bg02.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg03-img {  
  background-image: url("../img/bg03.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg04-img {  
  background-image: url("../img/bg04.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}

Inheritance class

.inherit-width {  
  width: inherit;  
}  
.inherit-min-width {  
  min-width: inherit;  
}  
.inherit-height {  
  height: inherit;  
}  
.inherit-min-height {  
  min-height: inherit;  
}  
.inherit-color {  
  color: inherit;  
}

Text indentation

.text-indent {  
  text-indent: 2rem;  
}  
/*16px*/  
.text-indent-xs {  
  text-indent: 1.5rem;  
}  
/*12px*/  
.text-indent-sm {  
  text-indent: 1.7rem;  
}  
/*14px*/  
.text-indent-md {  
  text-indent: 2rem;  
}  
/*18px*/  
.text-indent-lg {  
  text-indent: 2.4rem;  
}  
/*20px*/

Row height

.line-height-xs {  
  line-height: 1.3rem;  
}  
.line-height-sm {  
  line-height: 1.5rem;  
}  
.line-height-md {  
  line-height: 1.7rem;  
}  
.line-height-lg {  
  line-height: 2rem;  
}  
  
.line-height-25x {  
  line-height: 25px;  
}  
.line-height-30x {  
  line-height: 30px;  
}

ul indentation

.ul-indent-xs {  
  margin-left: 0.5rem;  
}  
.ul-indent-sm {  
  margin-left: 1rem;  
}  
.ul-indent-md {  
  margin-left: 1.5rem;  
}  
.ul-indent-lg {  
  margin-left: 2rem;  
}  
.ol-list,  
.ul-list {  
  list-style: disc;  
}

Text truncation

.truncate {  
  max-width: 100%;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  
.hide {  
  display: none;  
}

Picture and video specifications

.img-max,  
.video-max {  
  width: 100%;  
  height: auto;  
}  
/*display Display mode*/  
.inline {  
  display: inline;  
}  
.inline-block {  
  display: inline-block;  
}  
.block {  
  display: block;  
}

Border style

.border-xs-black {  
  border: 1px solid #000;  
}  
.border-sm-black {  
  border: 2px solid #000;  
}  
.border-md-black {  
  border: 3px solid #000;  
}  
.border-lg-black {  
  border: 5px solid #000;  
}  
  
.border-xs-gray {  
  border: 1px solid #9c9c9c;  
}  
.border-sm-gray {  
  border: 2px solid #9c9c9c;  
}  
.border-md-gray {  
  border: 3px solid #9c9c9c;  
}  
.border-lg-gray {  
  border: 5px solid #9c9c9c;  
}

background color

.bg-white {  
  background: #fff !important;  
}  
.bg-black {  
  background: #1b1c1d !important;  
}  
.bg-gray {  
  background: #767676 !important;  
}  
.bg-light-gray {  
  background: #f8f7f7 !important;  
}  
.bg-yellow {  
  background: #fbbd08 !important;  
}  
.bg-orange {  
  background: #f2711c !important;  
}  
.bg-red {  
  background: #db2828 !important;  
}  
.bg-olive {  
  background: #b5cc18 !important;  
}  
.bg-green {  
  background: #21ba45 !important;  
}  
.bg-teal {  
  background: #00b5ad !important;  
}  
.bg-darkGreen {  
  background: #19a97b !important;  
}  
.bg-threeGreen {  
  background: #097c25 !important;  
}  
.bg-blue {  
  background: #2185d0 !important;  
}  
.bg-violet {  
  background: #6435c9 !important;  
}  
.bg-purple {  
  background: #a333c8 !important;  
}  
.bg-brown {  
  background: #a5673f !important;  
}

Divider presets

hr,  
.hr-xs-Silver,  
.hr-sm-black,  
.hr-sm-Silver,  
.hr-xs-gray,  
.hr-sm-gray {  
  margin: 20px 0;  
}  
hr {  
  border: none;  
  border-top: 1px solid #000;  
}  
.hr-xs-Silver {  
  border: none;  
  border-top: 1px solid #c0c0c0;  
}  
.hr-sm-black {  
  border: none;  
  border-top: 2px solid #000;  
}  
.hr-sm-Silver {  
  border: none;  
  border-top: 2px solid #c0c0c0;  
}  
.hr-xs-gray {  
  border: none;  
  border-top: 1px solid #767676;  
}  
.hr-sm-gray {  
  border: none;  
  border-top: 2px solid #767676;  
}

hover effect of mouse a label

.hover-red a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-red:hover {  
  color: red;  
} /*Add the class name for the a tag separately*/  
.hover-yellow a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-yellow:hover {  
  color: #ffd700;  
} /*Add the class name for the a tag separately*/  
.hover-green a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-green:hover {  
  color: #70aa39;  
} /*Add the class name for the a tag separately*/  
.hover-blue a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-blue:hover {  
  color: blue;  
} /*Add the class name for the a tag separately*/  
.hover-gray a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-gray:hover {  
  color: #9c9c9c;  
} /*Add the class name for the a tag separately*/  
.underline a:hover,  
a.underline:hover {  
  text-decoration: underline;  
}

Shadow effect

.shadow-text-xs {  
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);  
} /*Intelligent compatible ie10 or above is not considered temporarily*/  
  
.shadow-xs {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */  
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */  
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */  
}  
.shadow-sm {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */  
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */  
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */  
}  
.shadow-md {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */  
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */  
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */  
}  
.shadow-lg {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */  
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */  
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */  
}

fillet

.border-radius-xs {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  
.border-radius-sm {  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-md {  
  -webkit-border-radius: 7px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-lg {  
  -webkit-border-radius: 9px;  
  -moz-border-radius: 9px;  
  border-radius: 9px;  
}

summary

If articles and notes can give you a little help or inspiration, please don't be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Clear floating

// Clear floating  
.clearfix:after {  
  content: "\00A0";  
  display: block;  
  visibility: hidden;  
  width: 0;  
  height: 0;  
  clear: both;  
  font-size: 0;  
  line-height: 0;  
  overflow: hidden;  
}  
.clearfix {  
  zoom: 1;  
}

Vertical horizontal center

Absolute positioning mode and known width and height

position: absolute;  
top: 50%;  
left: 50%;  
margin-top: -3em;  
margin-left: -7em;  
width: 14em;  
height: 6em;

Absolute positioning + unknown width and height + translate

position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
//Browser prefix required

flex easy horizontal vertical center (unknown width and height)

display: flex;  
align-items: center;  
justify-content: center;

Ellipsis at the end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width, suitable for single line display

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

Variable width, suitable for multi line and mobile display

overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 3;  
-webkit-box-orient: vertical;

Fuzzy effect of manufacturing text

We can do this when we want to create a fuzzy effect on the text

color: transparent;  
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Simple loading effect with animation

Let's implement a very simple loading effect

.loading:after {  
  display: inline-block;  
  overflow: hidden;  
  vertical-align: bottom;  
  content: "\2026";  
  -webkit-animation: ellipsis 2s infinite;  
}  
  
// Animation part  
@-webkit-keyframes ellipsis {  
  from {  
    width: 2px;  
  }  
  to {  
    width: 15px;  
  }  
}

Custom text selection style

// Note that you can only modify these two attributes font color select background color  
  
element::selection {  
  color: green;  
  background-color: pink;  
}  
element::-moz-selection {  
  color: green;  
  background-color: pink;  
}

Top corner sticker effect

Now let's go step by step to finish the leftmost effect

html

<div class="wrap">  
  <div class="ribbon">  
    <a href="#">Fork me on GitHub</a>  
  </div>  
</div>

css

/* Several settings of outer container  */  
.wrap {  
  width: 160px;  
  height: 160px;  
  overflow: hidden;  
  position: relative;  
  background-color: #f3f3f3;  
}  
  
.ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  position: absolute;  
  /* shadom */  
  -webkit-box-shadow: 0 0 10px #888;  
  -moz-box-shadow: 0 0 10px #888;  
  box-shadow: 0 0 10px #888;  
  /* rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* position */  
  left: -50px;  
  top: 40px;  
}  
  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* shadow */  
  text-shadow: 0 0 5px #444;  
}

input placeholder

When we set the placeholder property for some input types, sometimes we need to change the default style.

input::-webkit-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-moz-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-ms-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}

Mobile terminal can click the default border where the element goes

On mobile browsers, when you click a link or a clickable element defined by Javascript, a blue border will appear. To be honest, it's disgusting. How to remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

To achieve the effect similar to the drop cap in word, you can use the following code

element:first-letter {  
  float: left;  
  color: green;  
  font-size: 30px;  
}

Mistress triangle

We can use small triangles in many places. Next, let's draw triangles in four directions

.triangle {  
  /* Basic style */  
  border: solid 10px transparent;  
}  
/*lower*/  
.triangle.bottom {  
  border-top-color: green;  
}  
/*upper*/  
.triangle.top {  
  border-bottom-color: green;  
}  
/*Left*/  
.triangle.top {  
  border-right-color: green;  
}  
/*right*/  
.triangle.top {  
  border-left-color: green;  
}

Mouse hand type

In general, we want to add a mouse hand shape to the following elements

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],  
input[type="submit"],  
input[type="image"],  
input[type="button"],  
label[for],  
select,  
button {  
  cursor: pointer;  
}

Shielding the highlight effect of elements in Webkit mobile browser

When visiting the mobile website, you will find some gray boxes around the selected elements. Use the following code to block this style

-webkit-touch-callout: none;  
-webkit-user-select: none;  
-khtml-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;

Remove the default margin and padding for browsers with common tags

pre,code,legend,fieldset,blockquote … Etc. tags are not very common, so they are not listed one by one. If they are used in the project, you can write them separately

body,  
p,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
dl,  
dd,  
ul,  
ol,  
th,  
td,  
button,  
figure,  
input,  
textarea,  
form {  
  margin: 0;  
  padding: 0;  
}

Unified input, select, textarea width

The width of box models of input, select and textarea in different browsers is calculated differently, and they are unified into the most common content box

input,  
select,  
textarea {  
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;  
  box-sizing: content-box;  
}  
  
table {  
  /*table The distance between borders of adjacent cells is set to 0*/  
  border-spacing: 0;  
  /*By default, setting border to tr has no effect. If table has set border to merge mode: "border collapse: collapse;", it is OK*/  
  border-collapse: collapse;  
}

Remove the default border of some browser elements

acronym,fieldset … If other tags are not very common, they will not be listed one by one; if they are used in the project, they can be written separately

img,  
input,  
button,  
textarea {  
  border: none;  
  -webkit-appearance: none;  
}  
  
input {  
  /*Because input does not inherit the centering style of the parent element by default, set "text align: inherit"*/  
  text-align: inherit;  
}  
  
textarea {  
  /*textarea No zoom by default*/  
  resize: none;  
}

Cancel element outline style

Because some properties of the following elements do not inherit the parent node style, these properties of these elements are declared as properties of the parent element

a,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
input,  
select,  
button,  
option,  
textarea,  
optgroup {  
  font-family: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  line-height: inherit;  
  color: inherit;  
  outline: none;  
}

Remove the default text decoration for hyperlink elements

In addition, the dash and underline of del and ins labels are still very good, so they will not be removed

a {  
  text-decoration: none;  
}  
  
ol,  
ul {  
  /*In development, the list of UI design is too different from the original style, so the default list style of ol and ul is cancelled directly*/  
  list-style: none;  
}  
  
button,  
input[type="submit"],  
input[type="button"] {  
  /*The mouse is in the shape of "small hand", indicating that it can be clicked*/  
  cursor: pointer;  
}  
  
input::-moz-focus-inner {  
  /*The default "padding, border" when the input focus of some versions of Firefox is canceled*/  
  padding: 0;  
  border: 0;  
}

Cancel the action button of some browser digital input controls

input[type="number"] {  
  -moz-appearance: textfield;  
}  
  
input[type="number"]::-webkit-inner-spin-button,  
input[type="number"]::-webkit-outer-spin-button {  
  margin: 0;  
  -webkit-appearance: none;  
}

Enter the color setting of the control placeholder

input::-webkit-input-placeholder,  
textarea::-webkit-input-placeholder {  
  color: #999;  
}  
  
input:-moz-placeholder,  
textarea:-moz-placeholder {  
  color: #999;  
}  
  
input::-moz-placeholder,  
textarea::-moz-placeholder {  
  color: #999;  
}  
  
input:-ms-input-placeholder,  
textarea:-ms-input-placeholder {  
  color: #999;  
}  
  
template {  
  /*Because some browsing template s will be displayed, you need to hide*/  
  display: none;  
}

Position: short for fixed

.pf {  
  position: fixed;  
  /*chrome Kernel browser position: fixed to prevent jitter*/  
  -webkit-transform: translateZ(0);  
}

Use the principle of absolute positioning, width and height lifting, and center the element

.middle {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  margin: auto;  
}

Centering elements vertically with relative positioning in CSS3

.v-middle {  
  position: relative;  
  top: 50%;  
  -webkit-transform: -webkit-translateY(-50%);  
  -moz-transform: -moz-translateY(-50%);  
  -o-transform: -o-translateY(-50%);  
  transform: translateY(-50%);  
}

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

.bb {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

Single line text overflow display ellipsis "to = = > text overflow"

.to {  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

Initialize style

Different browsers have different default styles for each label. Sometimes we don't want to use the default style given by the browser. We can use reset.css to remove the default style

body,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
hr,  
p,  
blockquote,  
dl,  
dt,  
dd,  
ul,  
ol,  
li,  
pre,  
form,  
fieldset,  
legend,  
button,  
input,  
textarea,  
th,  
td {  
  margin: 0;  
  padding: 0;  
}  
body,  
button,  
input,  
select,  
textarea {  
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;  
}  
h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
  font-size: 100%;  
}  
address,  
cite,  
dfn,  
em,  
var {  
  font-style: normal;  
}  
code,  
kbd,  
pre,  
samp {  
  font-family: couriernew, courier, monospace;  
}  
small {  
  font-size: 12px;  
}  
ul,  
ol {  
  list-style: none;  
}  
a {  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
sup {  
  vertical-align: text-top;  
}  
sub {  
  vertical-align: text-bottom;  
}  
legend {  
  color: #000;  
}  
fieldset,  
img {  
  border: 0;  
}  
button,  
input,  
select,  
textarea {  
  font-size: 100%;  
}  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}

Force wrap / Auto wrap / force no wrap

/* Force no wrapping */  
div {  
  white-space: nowrap;  
}  
  
/* Automatic line feed */  
div {  
  word-wrap: break-word;  
  word-break: normal;  
}  
  
/* Force English word break */  
div {  
  word-break: break-all;  
}

Style of table boundary

table {  
  border: 1px solid #000;  
  padding: 0;  
  border-collapse: collapse;  
  table-layout: fixed;  
  margin-top: 10px;  
}  
table td {  
  height: 30px;  
  border: 1px solid #000;  
  background: #fff;  
  font-size: 15px;  
  padding: 3px 3px 3px 8px;  
  color: #000;  
  width: 160px;  
}

Absolute positioning and margin

When we know in advance the length and width of the element to be centered, we can use this method:

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  width: 160px;  
  height: 100px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-left: -80px; /* Half the width */  
  margin-top: -50px; /* Half the height */  
}

Absolute positioning and transform

When the elements to be centered are variable in width and height, we can use transform to offset the elements.

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);  
  text-align: center;  
}

line-height

Line height is actually row height. We can adjust the layout with row height!

However, there is a big disadvantage of this scheme: the copy must be single line, and if there are multiple lines, there will be problems with the set line height.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  line-height: 200px;  
}

table layout

Set display: table for the container element and display: table cell for the current element:

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: table;  
}  
.content {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center;  
}

flex layout

At the same time, the flex layout can also replace the problem that the line height scheme is not centered in some Android models.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
.content {  
  background-color: #ccc;  
  text-align: center;  
}

Picture top bottom left right center

.content {  
  width: 400px;  
  height: 400px;  
  border: 1px solid #ccc;  
  text-align: center;  
  display: table-cell;  
  vertical-align: middle;  
}

The html code is as follows:

<div class="content">  
  <img src="./4.jpg" alt="img" />  
</div>

Small bars on both sides of the title

Now we can use pseudo elements!

<div class="title">Title</div>

title {  
  color: #e1767c;  
  font-size: 0.3rem;  
  position: relative;  
  
  &:before,  
  &:after {  
    content: "";  
    position: absolute;  
    display: block;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate3d(-50%, -50%, 0);  
    transform: translate3d(-50%, -50%, 0);  
    border-top: 0.02rem solid #e1767c;  
    width: 0.4rem;  
  }  
  &:before {  
    margin-left: -1.2rem;  
  }  
  &:after {  
    margin-left: 1.2rem;  
  }  
}

Drawing elements with border attribute

In addition to being a simple drawing border, border can also draw arbitrary polygons such as triangles, trapezoids and stars. The following are two triangles and trapezoids drawn

<div class="triangle1"></div>  
<div class="triangle2"></div>  
<div class="trapezoid"></div>

.triangle1 {  
  /*Acute triangle*/  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 100px solid #249ff1;  
  border-left: 30px solid transparent;  
  border-right: 100px solid transparent;  
}  
.triangle2 {  
  /*right triangle*/  
  width: 0;  
  height: 0;  
  border-top: 80px solid transparent;  
  border-bottom: 80px solid #ff5b01;  
  border-left: 50px solid #ff5b01;  
  border-right: 50px solid transparent;  
}  
.trapezoid {  
  /*Trapezoid*/  
  width: 0;  
  height: 0;  
  border-top: none;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #13dbed;  
  border-left: 80px solid #13dbed;  
}

Drawing elements with border radius

Border radius is mainly used to draw the shapes of dots, circles, ellipses, rounded rectangles and so on. Here are two simple drawings.

<div class="circle"></div>  
<div class="ellipse"><div></div></div>

.circle,  
.ellipse {  
  width: 100px;  
  height: 100px;  
  background: #249ff1;  
  border-radius: 50%;  
}  
.ellipse {  
  width: 150px;  
  background: #ff9e01;  
}

But the border radius attribute can actually set up to 8 values, and many unexpected images can be obtained by changing 8 values

Drawing elements with box shadow

Three values: h-shadow v-shadow color
Four values: h-shadow v-shadow blur color
5 values: h-shadow v-shadow blur spread color
6 values: h-shadow v-shadow blur spread color inset

<div class="plus"></div>  
<div class="target"></div>

.plus {  
  width: 30px;  
  height: 30px;  
  margin-left: 50px; /*Because box shadow does not occupy space, it is often necessary to add margin to correct the position*/  
  background: #000;  
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;  
}  
.target {  
  width: 30px;  
  height: 30px;  
  background: red;  
  border-radius: 50%;  
  margin-left: 50px;  
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;  
}

Using CSS gradients to draw icons

The gradient property of CSS3 is very powerful. In theory, any graph can be drawn by gradient. The characteristics and use of gradient are enough to write a long article. Here is an example

<div class="gradient"></div>

.gradient {  
  position: relative;  
  width: 300px;  
  height: 300px;  
  border-radius: 50%;  
  background-color: silver;  
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),  
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(  
      335deg,  
      #b00 23px,  
      transparent 23px  
    ), linear-gradient(155deg, #d00 23px, transparent 23px);  
  background-size: 58px 58px;  
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;  
}

glass

.cup {  
  display: inline-block;  
  width: 0.9em;  
  height: 0.4em;  
  border: 0.25em solid;  
  border-bottom: 1.1em solid;  
  border-radius: 0 0 0.25em 0.25em;  
}  
cup:before {  
  position: absolute;  
  right: -0.6em;  
  top: 0;  
  width: 0.3em;  
  height: 0.8em;  
  border: 0.25em solid;  
  border-left: none;  
  border-radius: 0 0.25em 0.25em 0;  
  content: "";  
}

heart-shaped

.heart {  
  display: inline-block;  
  margin-top: 1.5em;  
  width: 50px;  
  height: 50px;  
  background: green;  
}  
.heart:before,  
.heart:after {  
  position: absolute;  
  width: 1em;  
  height: 1.6em;  
  background: #000;  
  border-radius: 50% 50% 0 0;  
  content: "";  
  bottom: 0;  
}  
.heart:before {  
  -webkit-transform: rotate(45deg);  
  -webkit-transform-origin: 100% 100%;  
  right: 0;  
  background: red;  
  opacity: 0.5;  
  z-index: 5;  
}  
.:after {  
  -webkit-transform: rotate(-45deg);  
  -webkit-transform-origin: 0 100%;  
  left: 0;  
  opacity: 0.8;  
}

camera

.camera {  
  display: inline-block;  
  border-style: solid;  
  border-width: 0.65em 0.9em;  
  border-radius: 0.1em;  
}  
.camera:before {  
  position: absolute;  
  top: -0.3em;  
  left: -0.3em;  
  width: 0.4em;  
  height: 0.4em;  
  border-radius: 50%;  
  border: 0.1em solid #fff;  
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;  
  content: "";  
}  
.camera:after {  
  position: absolute;  
  top: -0.5em;  
  left: 0.5em;  
  width: 0.2em;  
  border-top: 0.125em solid #fff;  
  content: "";  
}

Moon

.moon {  
  display: inline-block;  
  height: 1.5em;  
  width: 1.5em;  
  box-shadow: inset -0.4em 0 0;  
  border-radius: 2em;  
  transform: rotate(20deg);  
}

Floating class

General float list float image float

.float-left {  
  float: left;  
}  
.float-right {  
  float: right;  
}  
.float-li li,/*Defined on li parent element or ancestor element*/ li.float-li {  
  float: left;  
}  
.float-img img,/*Defined on img parent element or ancestor element*/ img.float-li {  
  float: left;  
}  
.float-span span,/*Defined on span parent element or ancestor element*/ span.float-span {  
  float: right;  
}

Background image embedding and positioning

.bg-img {  
  background-image: url("../img/bg.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg01-img {  
  background-image: url("../img/bg01.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg02-img {  
  background-image: url("../img/bg02.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg03-img {  
  background-image: url("../img/bg03.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg04-img {  
  background-image: url("../img/bg04.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}

Inheritance class

.inherit-width {  
  width: inherit;  
}  
.inherit-min-width {  
  min-width: inherit;  
}  
.inherit-height {  
  height: inherit;  
}  
.inherit-min-height {  
  min-height: inherit;  
}  
.inherit-color {  
  color: inherit;  
}

Text indentation

.text-indent {  
  text-indent: 2rem;  
}  
/*16px*/  
.text-indent-xs {  
  text-indent: 1.5rem;  
}  
/*12px*/  
.text-indent-sm {  
  text-indent: 1.7rem;  
}  
/*14px*/  
.text-indent-md {  
  text-indent: 2rem;  
}  
/*18px*/  
.text-indent-lg {  
  text-indent: 2.4rem;  
}  
/*20px*/

Row height

.line-height-xs {  
  line-height: 1.3rem;  
}  
.line-height-sm {  
  line-height: 1.5rem;  
}  
.line-height-md {  
  line-height: 1.7rem;  
}  
.line-height-lg {  
  line-height: 2rem;  
}  
  
.line-height-25x {  
  line-height: 25px;  
}  
.line-height-30x {  
  line-height: 30px;  
}

ul indentation

.ul-indent-xs {  
  margin-left: 0.5rem;  
}  
.ul-indent-sm {  
  margin-left: 1rem;  
}  
.ul-indent-md {  
  margin-left: 1.5rem;  
}  
.ul-indent-lg {  
  margin-left: 2rem;  
}  
.ol-list,  
.ul-list {  
  list-style: disc;  
}

Text truncation

.truncate {  
  max-width: 100%;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  
.hide {  
  display: none;  
}

Picture and video specifications

.img-max,  
.video-max {  
  width: 100%;  
  height: auto;  
}  
/*display Display mode*/  
.inline {  
  display: inline;  
}  
.inline-block {  
  display: inline-block;  
}  
.block {  
  display: block;  
}

Border style

.border-xs-black {  
  border: 1px solid #000;  
}  
.border-sm-black {  
  border: 2px solid #000;  
}  
.border-md-black {  
  border: 3px solid #000;  
}  
.border-lg-black {  
  border: 5px solid #000;  
}  
  
.border-xs-gray {  
  border: 1px solid #9c9c9c;  
}  
.border-sm-gray {  
  border: 2px solid #9c9c9c;  
}  
.border-md-gray {  
  border: 3px solid #9c9c9c;  
}  
.border-lg-gray {  
  border: 5px solid #9c9c9c;  
}

background color

.bg-white {  
  background: #fff !important;  
}  
.bg-black {  
  background: #1b1c1d !important;  
}  
.bg-gray {  
  background: #767676 !important;  
}  
.bg-light-gray {  
  background: #f8f7f7 !important;  
}  
.bg-yellow {  
  background: #fbbd08 !important;  
}  
.bg-orange {  
  background: #f2711c !important;  
}  
.bg-red {  
  background: #db2828 !important;  
}  
.bg-olive {  
  background: #b5cc18 !important;  
}  
.bg-green {  
  background: #21ba45 !important;  
}  
.bg-teal {  
  background: #00b5ad !important;  
}  
.bg-darkGreen {  
  background: #19a97b !important;  
}  
.bg-threeGreen {  
  background: #097c25 !important;  
}  
.bg-blue {  
  background: #2185d0 !important;  
}  
.bg-violet {  
  background: #6435c9 !important;  
}  
.bg-purple {  
  background: #a333c8 !important;  
}  
.bg-brown {  
  background: #a5673f !important;  
}

Divider presets

hr,  
.hr-xs-Silver,  
.hr-sm-black,  
.hr-sm-Silver,  
.hr-xs-gray,  
.hr-sm-gray {  
  margin: 20px 0;  
}  
hr {  
  border: none;  
  border-top: 1px solid #000;  
}  
.hr-xs-Silver {  
  border: none;  
  border-top: 1px solid #c0c0c0;  
}  
.hr-sm-black {  
  border: none;  
  border-top: 2px solid #000;  
}  
.hr-sm-Silver {  
  border: none;  
  border-top: 2px solid #c0c0c0;  
}  
.hr-xs-gray {  
  border: none;  
  border-top: 1px solid #767676;  
}  
.hr-sm-gray {  
  border: none;  
  border-top: 2px solid #767676;  
}

hover effect of mouse a label

.hover-red a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-red:hover {  
  color: red;  
} /*Add the class name for the a tag separately*/  
.hover-yellow a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-yellow:hover {  
  color: #ffd700;  
} /*Add the class name for the a tag separately*/  
.hover-green a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-green:hover {  
  color: #70aa39;  
} /*Add the class name for the a tag separately*/  
.hover-blue a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-blue:hover {  
  color: blue;  
} /*Add the class name for the a tag separately*/  
.hover-gray a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-gray:hover {  
  color: #9c9c9c;  
} /*Add the class name for the a tag separately*/  
.underline a:hover,  
a.underline:hover {  
  text-decoration: underline;  
}

Shadow effect

.shadow-text-xs {  
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);  
} /*Intelligent compatible ie10 or above is not considered temporarily*/  
  
.shadow-xs {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */  
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */  
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */  
}  
.shadow-sm {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */  
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */  
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */  
}  
.shadow-md {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */  
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */  
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */  
}  
.shadow-lg {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */  
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */  
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */  
}

fillet

.border-radius-xs {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  
.border-radius-sm {  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-md {  
  -webkit-border-radius: 7px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-lg {  
  -webkit-border-radius: 9px;  
  -moz-border-radius: 9px;  
  border-radius: 9px;  
}

summary

If articles and notes can give you a little help or inspiration, please don't be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Clear floating

// Clear floating  
.clearfix:after {  
  content: "\00A0";  
  display: block;  
  visibility: hidden;  
  width: 0;  
  height: 0;  
  clear: both;  
  font-size: 0;  
  line-height: 0;  
  overflow: hidden;  
}  
.clearfix {  
  zoom: 1;  
}

Vertical horizontal center

Absolute positioning mode and known width and height

position: absolute;  
top: 50%;  
left: 50%;  
margin-top: -3em;  
margin-left: -7em;  
width: 14em;  
height: 6em;

Absolute positioning + unknown width and height + translate

position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
//Browser prefix required

flex easy horizontal vertical center (unknown width and height)

display: flex;  
align-items: center;  
justify-content: center;

Ellipsis at the end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width, suitable for single line display

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

Variable width, suitable for multi line and mobile display

overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 3;  
-webkit-box-orient: vertical;

Fuzzy effect of manufacturing text

We can do this when we want to create a fuzzy effect on the text

color: transparent;  
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Simple loading effect with animation

Let's implement a very simple loading effect

.loading:after {  
  display: inline-block;  
  overflow: hidden;  
  vertical-align: bottom;  
  content: "\2026";  
  -webkit-animation: ellipsis 2s infinite;  
}  
  
// Animation part  
@-webkit-keyframes ellipsis {  
  from {  
    width: 2px;  
  }  
  to {  
    width: 15px;  
  }  
}

Custom text selection style

// Note that you can only modify these two attributes font color select background color  
  
element::selection {  
  color: green;  
  background-color: pink;  
}  
element::-moz-selection {  
  color: green;  
  background-color: pink;  
}

Top corner sticker effect

Now let's go step by step to finish the leftmost effect

html

<div class="wrap">  
  <div class="ribbon">  
    <a href="#">Fork me on GitHub</a>  
  </div>  
</div>

css

/* Several settings of outer container  */  
.wrap {  
  width: 160px;  
  height: 160px;  
  overflow: hidden;  
  position: relative;  
  background-color: #f3f3f3;  
}  
  
.ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  position: absolute;  
  /* shadom */  
  -webkit-box-shadow: 0 0 10px #888;  
  -moz-box-shadow: 0 0 10px #888;  
  box-shadow: 0 0 10px #888;  
  /* rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* position */  
  left: -50px;  
  top: 40px;  
}  
  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* shadow */  
  text-shadow: 0 0 5px #444;  
}

input placeholder

When we set the placeholder property for some input types, sometimes we need to change the default style.

input::-webkit-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-moz-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-ms-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}

Mobile terminal can click the default border where the element goes

On mobile browsers, when you click a link or a clickable element defined by Javascript, a blue border will appear. To be honest, it's disgusting. How to remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

To achieve the effect similar to the drop cap in word, you can use the following code

element:first-letter {  
  float: left;  
  color: green;  
  font-size: 30px;  
}

Mistress triangle

We can use small triangles in many places. Next, let's draw triangles in four directions

.triangle {  
  /* Basic style */  
  border: solid 10px transparent;  
}  
/*lower*/  
.triangle.bottom {  
  border-top-color: green;  
}  
/*upper*/  
.triangle.top {  
  border-bottom-color: green;  
}  
/*Left*/  
.triangle.top {  
  border-right-color: green;  
}  
/*right*/  
.triangle.top {  
  border-left-color: green;  
}

Mouse hand type

In general, we want to add a mouse hand shape to the following elements

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],  
input[type="submit"],  
input[type="image"],  
input[type="button"],  
label[for],  
select,  
button {  
  cursor: pointer;  
}

Shielding the highlight effect of elements in Webkit mobile browser

When visiting the mobile website, you will find some gray boxes around the selected elements. Use the following code to block this style

-webkit-touch-callout: none;  
-webkit-user-select: none;  
-khtml-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;

Remove the default margin and padding for browsers with common tags

pre,code,legend,fieldset,blockquote … Etc. tags are not very common, so they are not listed one by one. If they are used in the project, you can write them separately

body,  
p,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
dl,  
dd,  
ul,  
ol,  
th,  
td,  
button,  
figure,  
input,  
textarea,  
form {  
  margin: 0;  
  padding: 0;  
}

Unified input, select, textarea width

The width of box models of input, select and textarea in different browsers is calculated differently, and they are unified into the most common content box

input,  
select,  
textarea {  
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;  
  box-sizing: content-box;  
}  
  
table {  
  /*table The distance between borders of adjacent cells is set to 0*/  
  border-spacing: 0;  
  /*By default, setting border to tr has no effect. If table has set border to merge mode: "border collapse: collapse;", it is OK*/  
  border-collapse: collapse;  
}

Remove the default border of some browser elements

acronym,fieldset … If other tags are not very common, they will not be listed one by one; if they are used in the project, they can be written separately

img,  
input,  
button,  
textarea {  
  border: none;  
  -webkit-appearance: none;  
}  
  
input {  
  /*Because input does not inherit the centering style of the parent element by default, set "text align: inherit"*/  
  text-align: inherit;  
}  
  
textarea {  
  /*textarea No zoom by default*/  
  resize: none;  
}

Cancel element outline style

Because some properties of the following elements do not inherit the parent node style, these properties of these elements are declared as properties of the parent element

a,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
input,  
select,  
button,  
option,  
textarea,  
optgroup {  
  font-family: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  line-height: inherit;  
  color: inherit;  
  outline: none;  
}

Remove the default text decoration for hyperlink elements

In addition, the dash and underline of del and ins labels are still very good, so they will not be removed

a {  
  text-decoration: none;  
}  
  
ol,  
ul {  
  /*In development, the list of UI design is too different from the original style, so the default list style of ol and ul is cancelled directly*/  
  list-style: none;  
}  
  
button,  
input[type="submit"],  
input[type="button"] {  
  /*The mouse is in the shape of "small hand", indicating that it can be clicked*/  
  cursor: pointer;  
}  
  
input::-moz-focus-inner {  
  /*The default "padding, border" when the input focus of some versions of Firefox is canceled*/  
  padding: 0;  
  border: 0;  
}

Cancel the action button of some browser digital input controls

input[type="number"] {  
  -moz-appearance: textfield;  
}  
  
input[type="number"]::-webkit-inner-spin-button,  
input[type="number"]::-webkit-outer-spin-button {  
  margin: 0;  
  -webkit-appearance: none;  
}

Enter the color setting of the control placeholder

input::-webkit-input-placeholder,  
textarea::-webkit-input-placeholder {  
  color: #999;  
}  
  
input:-moz-placeholder,  
textarea:-moz-placeholder {  
  color: #999;  
}  
  
input::-moz-placeholder,  
textarea::-moz-placeholder {  
  color: #999;  
}  
  
input:-ms-input-placeholder,  
textarea:-ms-input-placeholder {  
  color: #999;  
}  
  
template {  
  /*Because some browsing template s will be displayed, you need to hide*/  
  display: none;  
}

Position: short for fixed

.pf {  
  position: fixed;  
  /*chrome Kernel browser position: fixed to prevent jitter*/  
  -webkit-transform: translateZ(0);  
}

Use the principle of absolute positioning, width and height lifting, and center the element

.middle {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  margin: auto;  
}

Centering elements vertically with relative positioning in CSS3

.v-middle {  
  position: relative;  
  top: 50%;  
  -webkit-transform: -webkit-translateY(-50%);  
  -moz-transform: -moz-translateY(-50%);  
  -o-transform: -o-translateY(-50%);  
  transform: translateY(-50%);  
}

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

.bb {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

Single line text overflow display ellipsis "to = = > text overflow"

.to {  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

Initialize style

Different browsers have different default styles for each label. Sometimes we don't want to use the default style given by the browser. We can use reset.css to remove the default style

body,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
hr,  
p,  
blockquote,  
dl,  
dt,  
dd,  
ul,  
ol,  
li,  
pre,  
form,  
fieldset,  
legend,  
button,  
input,  
textarea,  
th,  
td {  
  margin: 0;  
  padding: 0;  
}  
body,  
button,  
input,  
select,  
textarea {  
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;  
}  
h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
  font-size: 100%;  
}  
address,  
cite,  
dfn,  
em,  
var {  
  font-style: normal;  
}  
code,  
kbd,  
pre,  
samp {  
  font-family: couriernew, courier, monospace;  
}  
small {  
  font-size: 12px;  
}  
ul,  
ol {  
  list-style: none;  
}  
a {  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
sup {  
  vertical-align: text-top;  
}  
sub {  
  vertical-align: text-bottom;  
}  
legend {  
  color: #000;  
}  
fieldset,  
img {  
  border: 0;  
}  
button,  
input,  
select,  
textarea {  
  font-size: 100%;  
}  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}

Force wrap / Auto wrap / force no wrap

/* Force no wrapping */  
div {  
  white-space: nowrap;  
}  
  
/* Automatic line feed */  
div {  
  word-wrap: break-word;  
  word-break: normal;  
}  
  
/* Force English word break */  
div {  
  word-break: break-all;  
}

Style of table boundary

table {  
  border: 1px solid #000;  
  padding: 0;  
  border-collapse: collapse;  
  table-layout: fixed;  
  margin-top: 10px;  
}  
table td {  
  height: 30px;  
  border: 1px solid #000;  
  background: #fff;  
  font-size: 15px;  
  padding: 3px 3px 3px 8px;  
  color: #000;  
  width: 160px;  
}

Absolute positioning and margin

When we know in advance the length and width of the element to be centered, we can use this method:

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  width: 160px;  
  height: 100px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-left: -80px; /* Half the width */  
  margin-top: -50px; /* Half the height */  
}

Absolute positioning and transform

When the elements to be centered are variable in width and height, we can use transform to offset the elements.

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);  
  text-align: center;  
}

line-height

Line height is actually row height. We can adjust the layout with row height!

However, there is a big disadvantage of this scheme: the copy must be single line, and if there are multiple lines, there will be problems with the set line height.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  line-height: 200px;  
}

table layout

Set display: table for the container element and display: table cell for the current element:

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: table;  
}  
.content {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center;  
}

flex layout

At the same time, the flex layout can also replace the problem that the line height scheme is not centered in some Android models.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
.content {  
  background-color: #ccc;  
  text-align: center;  
}

Picture top bottom left right center

.content {  
  width: 400px;  
  height: 400px;  
  border: 1px solid #ccc;  
  text-align: center;  
  display: table-cell;  
  vertical-align: middle;  
}

The html code is as follows:

<div class="content">  
  <img src="./4.jpg" alt="img" />  
</div>

Small bars on both sides of the title

Now we can use pseudo elements!

<div class="title">Title</div>

title {  
  color: #e1767c;  
  font-size: 0.3rem;  
  position: relative;  
  
  &:before,  
  &:after {  
    content: "";  
    position: absolute;  
    display: block;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate3d(-50%, -50%, 0);  
    transform: translate3d(-50%, -50%, 0);  
    border-top: 0.02rem solid #e1767c;  
    width: 0.4rem;  
  }  
  &:before {  
    margin-left: -1.2rem;  
  }  
  &:after {  
    margin-left: 1.2rem;  
  }  
}

Drawing elements with border attribute

In addition to being a simple drawing border, border can also draw arbitrary polygons such as triangles, trapezoids and stars. The following are two triangles and trapezoids drawn

<div class="triangle1"></div>  
<div class="triangle2"></div>  
<div class="trapezoid"></div>

.triangle1 {  
  /*Acute triangle*/  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 100px solid #249ff1;  
  border-left: 30px solid transparent;  
  border-right: 100px solid transparent;  
}  
.triangle2 {  
  /*right triangle*/  
  width: 0;  
  height: 0;  
  border-top: 80px solid transparent;  
  border-bottom: 80px solid #ff5b01;  
  border-left: 50px solid #ff5b01;  
  border-right: 50px solid transparent;  
}  
.trapezoid {  
  /*Trapezoid*/  
  width: 0;  
  height: 0;  
  border-top: none;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #13dbed;  
  border-left: 80px solid #13dbed;  
}

Drawing elements with border radius

Border radius is mainly used to draw the shapes of dots, circles, ellipses, rounded rectangles and so on. Here are two simple drawings.

<div class="circle"></div>  
<div class="ellipse"><div></div></div>

.circle,  
.ellipse {  
  width: 100px;  
  height: 100px;  
  background: #249ff1;  
  border-radius: 50%;  
}  
.ellipse {  
  width: 150px;  
  background: #ff9e01;  
}

But the border radius attribute can actually set up to 8 values, and many unexpected images can be obtained by changing 8 values

Drawing elements with box shadow

Three values: h-shadow v-shadow color
Four values: h-shadow v-shadow blur color
5 values: h-shadow v-shadow blur spread color
6 values: h-shadow v-shadow blur spread color inset

<div class="plus"></div>  
<div class="target"></div>

.plus {  
  width: 30px;  
  height: 30px;  
  margin-left: 50px; /*Because box shadow does not occupy space, it is often necessary to add margin to correct the position*/  
  background: #000;  
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;  
}  
.target {  
  width: 30px;  
  height: 30px;  
  background: red;  
  border-radius: 50%;  
  margin-left: 50px;  
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;  
}

Using CSS gradients to draw icons

The gradient property of CSS3 is very powerful. In theory, any graph can be drawn by gradient. The characteristics and use of gradient are enough to write a long article. Here is an example

<div class="gradient"></div>

.gradient {  
  position: relative;  
  width: 300px;  
  height: 300px;  
  border-radius: 50%;  
  background-color: silver;  
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),  
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(  
      335deg,  
      #b00 23px,  
      transparent 23px  
    ), linear-gradient(155deg, #d00 23px, transparent 23px);  
  background-size: 58px 58px;  
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;  
}

glass

.cup {  
  display: inline-block;  
  width: 0.9em;  
  height: 0.4em;  
  border: 0.25em solid;  
  border-bottom: 1.1em solid;  
  border-radius: 0 0 0.25em 0.25em;  
}  
cup:before {  
  position: absolute;  
  right: -0.6em;  
  top: 0;  
  width: 0.3em;  
  height: 0.8em;  
  border: 0.25em solid;  
  border-left: none;  
  border-radius: 0 0.25em 0.25em 0;  
  content: "";  
}

heart-shaped

.heart {  
  display: inline-block;  
  margin-top: 1.5em;  
  width: 50px;  
  height: 50px;  
  background: green;  
}  
.heart:before,  
.heart:after {  
  position: absolute;  
  width: 1em;  
  height: 1.6em;  
  background: #000;  
  border-radius: 50% 50% 0 0;  
  content: "";  
  bottom: 0;  
}  
.heart:before {  
  -webkit-transform: rotate(45deg);  
  -webkit-transform-origin: 100% 100%;  
  right: 0;  
  background: red;  
  opacity: 0.5;  
  z-index: 5;  
}  
.:after {  
  -webkit-transform: rotate(-45deg);  
  -webkit-transform-origin: 0 100%;  
  left: 0;  
  opacity: 0.8;  
}

camera

.camera {  
  display: inline-block;  
  border-style: solid;  
  border-width: 0.65em 0.9em;  
  border-radius: 0.1em;  
}  
.camera:before {  
  position: absolute;  
  top: -0.3em;  
  left: -0.3em;  
  width: 0.4em;  
  height: 0.4em;  
  border-radius: 50%;  
  border: 0.1em solid #fff;  
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;  
  content: "";  
}  
.camera:after {  
  position: absolute;  
  top: -0.5em;  
  left: 0.5em;  
  width: 0.2em;  
  border-top: 0.125em solid #fff;  
  content: "";  
}

Moon

.moon {  
  display: inline-block;  
  height: 1.5em;  
  width: 1.5em;  
  box-shadow: inset -0.4em 0 0;  
  border-radius: 2em;  
  transform: rotate(20deg);  
}

Floating class

General float list float image float

.float-left {  
  float: left;  
}  
.float-right {  
  float: right;  
}  
.float-li li,/*Defined on li parent element or ancestor element*/ li.float-li {  
  float: left;  
}  
.float-img img,/*Defined on img parent element or ancestor element*/ img.float-li {  
  float: left;  
}  
.float-span span,/*Defined on span parent element or ancestor element*/ span.float-span {  
  float: right;  
}

Background image embedding and positioning

.bg-img {  
  background-image: url("../img/bg.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg01-img {  
  background-image: url("../img/bg01.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg02-img {  
  background-image: url("../img/bg02.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg03-img {  
  background-image: url("../img/bg03.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg04-img {  
  background-image: url("../img/bg04.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}

Inheritance class

.inherit-width {  
  width: inherit;  
}  
.inherit-min-width {  
  min-width: inherit;  
}  
.inherit-height {  
  height: inherit;  
}  
.inherit-min-height {  
  min-height: inherit;  
}  
.inherit-color {  
  color: inherit;  
}

Text indentation

.text-indent {  
  text-indent: 2rem;  
}  
/*16px*/  
.text-indent-xs {  
  text-indent: 1.5rem;  
}  
/*12px*/  
.text-indent-sm {  
  text-indent: 1.7rem;  
}  
/*14px*/  
.text-indent-md {  
  text-indent: 2rem;  
}  
/*18px*/  
.text-indent-lg {  
  text-indent: 2.4rem;  
}  
/*20px*/

Row height

.line-height-xs {  
  line-height: 1.3rem;  
}  
.line-height-sm {  
  line-height: 1.5rem;  
}  
.line-height-md {  
  line-height: 1.7rem;  
}  
.line-height-lg {  
  line-height: 2rem;  
}  
  
.line-height-25x {  
  line-height: 25px;  
}  
.line-height-30x {  
  line-height: 30px;  
}

ul indentation

.ul-indent-xs {  
  margin-left: 0.5rem;  
}  
.ul-indent-sm {  
  margin-left: 1rem;  
}  
.ul-indent-md {  
  margin-left: 1.5rem;  
}  
.ul-indent-lg {  
  margin-left: 2rem;  
}  
.ol-list,  
.ul-list {  
  list-style: disc;  
}

Text truncation

.truncate {  
  max-width: 100%;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  
.hide {  
  display: none;  
}

Picture and video specifications

.img-max,  
.video-max {  
  width: 100%;  
  height: auto;  
}  
/*display Display mode*/  
.inline {  
  display: inline;  
}  
.inline-block {  
  display: inline-block;  
}  
.block {  
  display: block;  
}

Border style

.border-xs-black {  
  border: 1px solid #000;  
}  
.border-sm-black {  
  border: 2px solid #000;  
}  
.border-md-black {  
  border: 3px solid #000;  
}  
.border-lg-black {  
  border: 5px solid #000;  
}  
  
.border-xs-gray {  
  border: 1px solid #9c9c9c;  
}  
.border-sm-gray {  
  border: 2px solid #9c9c9c;  
}  
.border-md-gray {  
  border: 3px solid #9c9c9c;  
}  
.border-lg-gray {  
  border: 5px solid #9c9c9c;  
}

background color

.bg-white {  
  background: #fff !important;  
}  
.bg-black {  
  background: #1b1c1d !important;  
}  
.bg-gray {  
  background: #767676 !important;  
}  
.bg-light-gray {  
  background: #f8f7f7 !important;  
}  
.bg-yellow {  
  background: #fbbd08 !important;  
}  
.bg-orange {  
  background: #f2711c !important;  
}  
.bg-red {  
  background: #db2828 !important;  
}  
.bg-olive {  
  background: #b5cc18 !important;  
}  
.bg-green {  
  background: #21ba45 !important;  
}  
.bg-teal {  
  background: #00b5ad !important;  
}  
.bg-darkGreen {  
  background: #19a97b !important;  
}  
.bg-threeGreen {  
  background: #097c25 !important;  
}  
.bg-blue {  
  background: #2185d0 !important;  
}  
.bg-violet {  
  background: #6435c9 !important;  
}  
.bg-purple {  
  background: #a333c8 !important;  
}  
.bg-brown {  
  background: #a5673f !important;  
}

Divider presets

hr,  
.hr-xs-Silver,  
.hr-sm-black,  
.hr-sm-Silver,  
.hr-xs-gray,  
.hr-sm-gray {  
  margin: 20px 0;  
}  
hr {  
  border: none;  
  border-top: 1px solid #000;  
}  
.hr-xs-Silver {  
  border: none;  
  border-top: 1px solid #c0c0c0;  
}  
.hr-sm-black {  
  border: none;  
  border-top: 2px solid #000;  
}  
.hr-sm-Silver {  
  border: none;  
  border-top: 2px solid #c0c0c0;  
}  
.hr-xs-gray {  
  border: none;  
  border-top: 1px solid #767676;  
}  
.hr-sm-gray {  
  border: none;  
  border-top: 2px solid #767676;  
}

hover effect of mouse a label

.hover-red a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-red:hover {  
  color: red;  
} /*Add the class name for the a tag separately*/  
.hover-yellow a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-yellow:hover {  
  color: #ffd700;  
} /*Add the class name for the a tag separately*/  
.hover-green a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-green:hover {  
  color: #70aa39;  
} /*Add the class name for the a tag separately*/  
.hover-blue a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-blue:hover {  
  color: blue;  
} /*Add the class name for the a tag separately*/  
.hover-gray a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-gray:hover {  
  color: #9c9c9c;  
} /*Add the class name for the a tag separately*/  
.underline a:hover,  
a.underline:hover {  
  text-decoration: underline;  
}

Shadow effect

.shadow-text-xs {  
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);  
} /*Intelligent compatible ie10 or above is not considered temporarily*/  
  
.shadow-xs {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */  
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */  
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */  
}  
.shadow-sm {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */  
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */  
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */  
}  
.shadow-md {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */  
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */  
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */  
}  
.shadow-lg {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */  
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */  
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */  
}

fillet

.border-radius-xs {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  
.border-radius-sm {  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-md {  
  -webkit-border-radius: 7px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-lg {  
  -webkit-border-radius: 9px;  
  -moz-border-radius: 9px;  
  border-radius: 9px;  
}

summary

If articles and notes can give you a little help or inspiration, please don't be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Clear floating

// Clear floating  
.clearfix:after {  
  content: "\00A0";  
  display: block;  
  visibility: hidden;  
  width: 0;  
  height: 0;  
  clear: both;  
  font-size: 0;  
  line-height: 0;  
  overflow: hidden;  
}  
.clearfix {  
  zoom: 1;  
}

Vertical horizontal center

Absolute positioning mode and known width and height

position: absolute;  
top: 50%;  
left: 50%;  
margin-top: -3em;  
margin-left: -7em;  
width: 14em;  
height: 6em;

Absolute positioning + unknown width and height + translate

position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
//Browser prefix required

flex easy horizontal vertical center (unknown width and height)

display: flex;  
align-items: center;  
justify-content: center;

Ellipsis at the end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width, suitable for single line display

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

Variable width, suitable for multi line and mobile display

overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 3;  
-webkit-box-orient: vertical;

Fuzzy effect of manufacturing text

We can do this when we want to create a fuzzy effect on the text

color: transparent;  
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Simple loading effect with animation

Let's implement a very simple loading effect

.loading:after {  
  display: inline-block;  
  overflow: hidden;  
  vertical-align: bottom;  
  content: "\2026";  
  -webkit-animation: ellipsis 2s infinite;  
}  
  
// Animation part  
@-webkit-keyframes ellipsis {  
  from {  
    width: 2px;  
  }  
  to {  
    width: 15px;  
  }  
}

Custom text selection style

// Note that you can only modify these two attributes font color select background color  
  
element::selection {  
  color: green;  
  background-color: pink;  
}  
element::-moz-selection {  
  color: green;  
  background-color: pink;  
}

Top corner sticker effect

Now let's go step by step to finish the leftmost effect

html

<div class="wrap">  
  <div class="ribbon">  
    <a href="#">Fork me on GitHub</a>  
  </div>  
</div>

css

/* Several settings of outer container  */  
.wrap {  
  width: 160px;  
  height: 160px;  
  overflow: hidden;  
  position: relative;  
  background-color: #f3f3f3;  
}  
  
.ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  position: absolute;  
  /* shadom */  
  -webkit-box-shadow: 0 0 10px #888;  
  -moz-box-shadow: 0 0 10px #888;  
  box-shadow: 0 0 10px #888;  
  /* rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* position */  
  left: -50px;  
  top: 40px;  
}  
  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* shadow */  
  text-shadow: 0 0 5px #444;  
}

input placeholder

When we set the placeholder property for some input types, sometimes we need to change the default style.

input::-webkit-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-moz-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-ms-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}

Mobile terminal can click the default border where the element goes

On mobile browsers, when you click a link or a clickable element defined by Javascript, a blue border will appear. To be honest, it's disgusting. How to remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

To achieve the effect similar to the drop cap in word, you can use the following code

element:first-letter {  
  float: left;  
  color: green;  
  font-size: 30px;  
}

Mistress triangle

We can use small triangles in many places. Next, let's draw triangles in four directions

.triangle {  
  /* Basic style */  
  border: solid 10px transparent;  
}  
/*lower*/  
.triangle.bottom {  
  border-top-color: green;  
}  
/*upper*/  
.triangle.top {  
  border-bottom-color: green;  
}  
/*Left*/  
.triangle.top {  
  border-right-color: green;  
}  
/*right*/  
.triangle.top {  
  border-left-color: green;  
}

Mouse hand type

In general, we want to add a mouse hand shape to the following elements

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],  
input[type="submit"],  
input[type="image"],  
input[type="button"],  
label[for],  
select,  
button {  
  cursor: pointer;  
}

Shielding the highlight effect of elements in Webkit mobile browser

When visiting the mobile website, you will find some gray boxes around the selected elements. Use the following code to block this style

-webkit-touch-callout: none;  
-webkit-user-select: none;  
-khtml-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;

Remove the default margin and padding for browsers with common tags

pre,code,legend,fieldset,blockquote … Etc. tags are not very common, so they are not listed one by one. If they are used in the project, you can write them separately

body,  
p,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
dl,  
dd,  
ul,  
ol,  
th,  
td,  
button,  
figure,  
input,  
textarea,  
form {  
  margin: 0;  
  padding: 0;  
}

Unified input, select, textarea width

The width of box models of input, select and textarea in different browsers is calculated differently, and they are unified into the most common content box

input,  
select,  
textarea {  
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;  
  box-sizing: content-box;  
}  
  
table {  
  /*table The distance between borders of adjacent cells is set to 0*/  
  border-spacing: 0;  
  /*By default, setting border to tr has no effect. If table has set border to merge mode: "border collapse: collapse;", it is OK*/  
  border-collapse: collapse;  
}

Remove the default border of some browser elements

acronym,fieldset … If other tags are not very common, they will not be listed one by one; if they are used in the project, they can be written separately

img,  
input,  
button,  
textarea {  
  border: none;  
  -webkit-appearance: none;  
}  
  
input {  
  /*Because input does not inherit the centering style of the parent element by default, set "text align: inherit"*/  
  text-align: inherit;  
}  
  
textarea {  
  /*textarea No zoom by default*/  
  resize: none;  
}

Cancel element outline style

Because some properties of the following elements do not inherit the parent node style, these properties of these elements are declared as properties of the parent element

a,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
input,  
select,  
button,  
option,  
textarea,  
optgroup {  
  font-family: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  line-height: inherit;  
  color: inherit;  
  outline: none;  
}

Remove the default text decoration for hyperlink elements

In addition, the dash and underline of del and ins labels are still very good, so they will not be removed

a {  
  text-decoration: none;  
}  
  
ol,  
ul {  
  /*In development, the list of UI design is too different from the original style, so the default list style of ol and ul is cancelled directly*/  
  list-style: none;  
}  
  
button,  
input[type="submit"],  
input[type="button"] {  
  /*The mouse is in the shape of "small hand", indicating that it can be clicked*/  
  cursor: pointer;  
}  
  
input::-moz-focus-inner {  
  /*The default "padding, border" when the input focus of some versions of Firefox is canceled*/  
  padding: 0;  
  border: 0;  
}

Cancel the action button of some browser digital input controls

input[type="number"] {  
  -moz-appearance: textfield;  
}  
  
input[type="number"]::-webkit-inner-spin-button,  
input[type="number"]::-webkit-outer-spin-button {  
  margin: 0;  
  -webkit-appearance: none;  
}

Enter the color setting of the control placeholder

input::-webkit-input-placeholder,  
textarea::-webkit-input-placeholder {  
  color: #999;  
}  
  
input:-moz-placeholder,  
textarea:-moz-placeholder {  
  color: #999;  
}  
  
input::-moz-placeholder,  
textarea::-moz-placeholder {  
  color: #999;  
}  
  
input:-ms-input-placeholder,  
textarea:-ms-input-placeholder {  
  color: #999;  
}  
  
template {  
  /*Because some browsing template s will be displayed, you need to hide*/  
  display: none;  
}

Position: short for fixed

.pf {  
  position: fixed;  
  /*chrome Kernel browser position: fixed to prevent jitter*/  
  -webkit-transform: translateZ(0);  
}

Use the principle of absolute positioning, width and height lifting, and center the element

.middle {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  margin: auto;  
}

Centering elements vertically with relative positioning in CSS3

.v-middle {  
  position: relative;  
  top: 50%;  
  -webkit-transform: -webkit-translateY(-50%);  
  -moz-transform: -moz-translateY(-50%);  
  -o-transform: -o-translateY(-50%);  
  transform: translateY(-50%);  
}

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

.bb {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

Single line text overflow display ellipsis "to = = > text overflow"

.to {  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

Initialize style

Different browsers have different default styles for each label. Sometimes we don't want to use the default style given by the browser. We can use reset.css to remove the default style

body,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
hr,  
p,  
blockquote,  
dl,  
dt,  
dd,  
ul,  
ol,  
li,  
pre,  
form,  
fieldset,  
legend,  
button,  
input,  
textarea,  
th,  
td {  
  margin: 0;  
  padding: 0;  
}  
body,  
button,  
input,  
select,  
textarea {  
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;  
}  
h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
  font-size: 100%;  
}  
address,  
cite,  
dfn,  
em,  
var {  
  font-style: normal;  
}  
code,  
kbd,  
pre,  
samp {  
  font-family: couriernew, courier, monospace;  
}  
small {  
  font-size: 12px;  
}  
ul,  
ol {  
  list-style: none;  
}  
a {  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
sup {  
  vertical-align: text-top;  
}  
sub {  
  vertical-align: text-bottom;  
}  
legend {  
  color: #000;  
}  
fieldset,  
img {  
  border: 0;  
}  
button,  
input,  
select,  
textarea {  
  font-size: 100%;  
}  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}

Force wrap / Auto wrap / force no wrap

/* Force no wrapping */  
div {  
  white-space: nowrap;  
}  
  
/* Automatic line feed */  
div {  
  word-wrap: break-word;  
  word-break: normal;  
}  
  
/* Force English word break */  
div {  
  word-break: break-all;  
}

Style of table boundary

table {  
  border: 1px solid #000;  
  padding: 0;  
  border-collapse: collapse;  
  table-layout: fixed;  
  margin-top: 10px;  
}  
table td {  
  height: 30px;  
  border: 1px solid #000;  
  background: #fff;  
  font-size: 15px;  
  padding: 3px 3px 3px 8px;  
  color: #000;  
  width: 160px;  
}

Absolute positioning and margin

When we know in advance the length and width of the element to be centered, we can use this method:

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  width: 160px;  
  height: 100px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-left: -80px; /* Half the width */  
  margin-top: -50px; /* Half the height */  
}

Absolute positioning and transform

When the elements to be centered are variable in width and height, we can use transform to offset the elements.

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);  
  text-align: center;  
}

line-height

Line height is actually row height. We can adjust the layout with row height!

However, there is a big disadvantage of this scheme: the copy must be single line, and if there are multiple lines, there will be problems with the set line height.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  line-height: 200px;  
}

table layout

Set display: table for the container element and display: table cell for the current element:

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: table;  
}  
.content {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center;  
}

flex layout

At the same time, the flex layout can also replace the problem that the line height scheme is not centered in some Android models.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
.content {  
  background-color: #ccc;  
  text-align: center;  
}

Picture top bottom left right center

.content {  
  width: 400px;  
  height: 400px;  
  border: 1px solid #ccc;  
  text-align: center;  
  display: table-cell;  
  vertical-align: middle;  
}

The html code is as follows:

<div class="content">  
  <img src="./4.jpg" alt="img" />  
</div>

Small bars on both sides of the title

Now we can use pseudo elements!

<div class="title">Title</div>

title {  
  color: #e1767c;  
  font-size: 0.3rem;  
  position: relative;  
  
  &:before,  
  &:after {  
    content: "";  
    position: absolute;  
    display: block;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate3d(-50%, -50%, 0);  
    transform: translate3d(-50%, -50%, 0);  
    border-top: 0.02rem solid #e1767c;  
    width: 0.4rem;  
  }  
  &:before {  
    margin-left: -1.2rem;  
  }  
  &:after {  
    margin-left: 1.2rem;  
  }  
}

Drawing elements with border attribute

In addition to being a simple drawing border, border can also draw arbitrary polygons such as triangles, trapezoids and stars. The following are two triangles and trapezoids drawn

<div class="triangle1"></div>  
<div class="triangle2"></div>  
<div class="trapezoid"></div>

.triangle1 {  
  /*Acute triangle*/  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 100px solid #249ff1;  
  border-left: 30px solid transparent;  
  border-right: 100px solid transparent;  
}  
.triangle2 {  
  /*right triangle*/  
  width: 0;  
  height: 0;  
  border-top: 80px solid transparent;  
  border-bottom: 80px solid #ff5b01;  
  border-left: 50px solid #ff5b01;  
  border-right: 50px solid transparent;  
}  
.trapezoid {  
  /*Trapezoid*/  
  width: 0;  
  height: 0;  
  border-top: none;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #13dbed;  
  border-left: 80px solid #13dbed;  
}

Drawing elements with border radius

Border radius is mainly used to draw the shapes of dots, circles, ellipses, rounded rectangles and so on. Here are two simple drawings.

<div class="circle"></div>  
<div class="ellipse"><div></div></div>

.circle,  
.ellipse {  
  width: 100px;  
  height: 100px;  
  background: #249ff1;  
  border-radius: 50%;  
}  
.ellipse {  
  width: 150px;  
  background: #ff9e01;  
}

But the border radius attribute can actually set up to 8 values, and many unexpected images can be obtained by changing 8 values

Drawing elements with box shadow

Three values: h-shadow v-shadow color
Four values: h-shadow v-shadow blur color
5 values: h-shadow v-shadow blur spread color
6 values: h-shadow v-shadow blur spread color inset

<div class="plus"></div>  
<div class="target"></div>

.plus {  
  width: 30px;  
  height: 30px;  
  margin-left: 50px; /*Because box shadow does not occupy space, it is often necessary to add margin to correct the position*/  
  background: #000;  
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;  
}  
.target {  
  width: 30px;  
  height: 30px;  
  background: red;  
  border-radius: 50%;  
  margin-left: 50px;  
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;  
}

Using CSS gradients to draw icons

The gradient property of CSS3 is very powerful. In theory, any graph can be drawn by gradient. The characteristics and use of gradient are enough to write a long article. Here is an example

<div class="gradient"></div>

.gradient {  
  position: relative;  
  width: 300px;  
  height: 300px;  
  border-radius: 50%;  
  background-color: silver;  
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),  
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(  
      335deg,  
      #b00 23px,  
      transparent 23px  
    ), linear-gradient(155deg, #d00 23px, transparent 23px);  
  background-size: 58px 58px;  
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;  
}

glass

.cup {  
  display: inline-block;  
  width: 0.9em;  
  height: 0.4em;  
  border: 0.25em solid;  
  border-bottom: 1.1em solid;  
  border-radius: 0 0 0.25em 0.25em;  
}  
cup:before {  
  position: absolute;  
  right: -0.6em;  
  top: 0;  
  width: 0.3em;  
  height: 0.8em;  
  border: 0.25em solid;  
  border-left: none;  
  border-radius: 0 0.25em 0.25em 0;  
  content: "";  
}

heart-shaped

.heart {  
  display: inline-block;  
  margin-top: 1.5em;  
  width: 50px;  
  height: 50px;  
  background: green;  
}  
.heart:before,  
.heart:after {  
  position: absolute;  
  width: 1em;  
  height: 1.6em;  
  background: #000;  
  border-radius: 50% 50% 0 0;  
  content: "";  
  bottom: 0;  
}  
.heart:before {  
  -webkit-transform: rotate(45deg);  
  -webkit-transform-origin: 100% 100%;  
  right: 0;  
  background: red;  
  opacity: 0.5;  
  z-index: 5;  
}  
.:after {  
  -webkit-transform: rotate(-45deg);  
  -webkit-transform-origin: 0 100%;  
  left: 0;  
  opacity: 0.8;  
}

camera

.camera {  
  display: inline-block;  
  border-style: solid;  
  border-width: 0.65em 0.9em;  
  border-radius: 0.1em;  
}  
.camera:before {  
  position: absolute;  
  top: -0.3em;  
  left: -0.3em;  
  width: 0.4em;  
  height: 0.4em;  
  border-radius: 50%;  
  border: 0.1em solid #fff;  
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;  
  content: "";  
}  
.camera:after {  
  position: absolute;  
  top: -0.5em;  
  left: 0.5em;  
  width: 0.2em;  
  border-top: 0.125em solid #fff;  
  content: "";  
}

Moon

.moon {  
  display: inline-block;  
  height: 1.5em;  
  width: 1.5em;  
  box-shadow: inset -0.4em 0 0;  
  border-radius: 2em;  
  transform: rotate(20deg);  
}

Floating class

General float list float image float

.float-left {  
  float: left;  
}  
.float-right {  
  float: right;  
}  
.float-li li,/*Defined on li parent element or ancestor element*/ li.float-li {  
  float: left;  
}  
.float-img img,/*Defined on img parent element or ancestor element*/ img.float-li {  
  float: left;  
}  
.float-span span,/*Defined on span parent element or ancestor element*/ span.float-span {  
  float: right;  
}

Background image embedding and positioning

.bg-img {  
  background-image: url("../img/bg.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg01-img {  
  background-image: url("../img/bg01.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg02-img {  
  background-image: url("../img/bg02.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg03-img {  
  background-image: url("../img/bg03.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg04-img {  
  background-image: url("../img/bg04.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}

Inheritance class

.inherit-width {  
  width: inherit;  
}  
.inherit-min-width {  
  min-width: inherit;  
}  
.inherit-height {  
  height: inherit;  
}  
.inherit-min-height {  
  min-height: inherit;  
}  
.inherit-color {  
  color: inherit;  
}

Text indentation

.text-indent {  
  text-indent: 2rem;  
}  
/*16px*/  
.text-indent-xs {  
  text-indent: 1.5rem;  
}  
/*12px*/  
.text-indent-sm {  
  text-indent: 1.7rem;  
}  
/*14px*/  
.text-indent-md {  
  text-indent: 2rem;  
}  
/*18px*/  
.text-indent-lg {  
  text-indent: 2.4rem;  
}  
/*20px*/

Row height

.line-height-xs {  
  line-height: 1.3rem;  
}  
.line-height-sm {  
  line-height: 1.5rem;  
}  
.line-height-md {  
  line-height: 1.7rem;  
}  
.line-height-lg {  
  line-height: 2rem;  
}  
  
.line-height-25x {  
  line-height: 25px;  
}  
.line-height-30x {  
  line-height: 30px;  
}

ul indentation

.ul-indent-xs {  
  margin-left: 0.5rem;  
}  
.ul-indent-sm {  
  margin-left: 1rem;  
}  
.ul-indent-md {  
  margin-left: 1.5rem;  
}  
.ul-indent-lg {  
  margin-left: 2rem;  
}  
.ol-list,  
.ul-list {  
  list-style: disc;  
}

Text truncation

.truncate {  
  max-width: 100%;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  
.hide {  
  display: none;  
}

Picture and video specifications

.img-max,  
.video-max {  
  width: 100%;  
  height: auto;  
}  
/*display Display mode*/  
.inline {  
  display: inline;  
}  
.inline-block {  
  display: inline-block;  
}  
.block {  
  display: block;  
}

Border style

.border-xs-black {  
  border: 1px solid #000;  
}  
.border-sm-black {  
  border: 2px solid #000;  
}  
.border-md-black {  
  border: 3px solid #000;  
}  
.border-lg-black {  
  border: 5px solid #000;  
}  
  
.border-xs-gray {  
  border: 1px solid #9c9c9c;  
}  
.border-sm-gray {  
  border: 2px solid #9c9c9c;  
}  
.border-md-gray {  
  border: 3px solid #9c9c9c;  
}  
.border-lg-gray {  
  border: 5px solid #9c9c9c;  
}

background color

.bg-white {  
  background: #fff !important;  
}  
.bg-black {  
  background: #1b1c1d !important;  
}  
.bg-gray {  
  background: #767676 !important;  
}  
.bg-light-gray {  
  background: #f8f7f7 !important;  
}  
.bg-yellow {  
  background: #fbbd08 !important;  
}  
.bg-orange {  
  background: #f2711c !important;  
}  
.bg-red {  
  background: #db2828 !important;  
}  
.bg-olive {  
  background: #b5cc18 !important;  
}  
.bg-green {  
  background: #21ba45 !important;  
}  
.bg-teal {  
  background: #00b5ad !important;  
}  
.bg-darkGreen {  
  background: #19a97b !important;  
}  
.bg-threeGreen {  
  background: #097c25 !important;  
}  
.bg-blue {  
  background: #2185d0 !important;  
}  
.bg-violet {  
  background: #6435c9 !important;  
}  
.bg-purple {  
  background: #a333c8 !important;  
}  
.bg-brown {  
  background: #a5673f !important;  
}

Divider presets

hr,  
.hr-xs-Silver,  
.hr-sm-black,  
.hr-sm-Silver,  
.hr-xs-gray,  
.hr-sm-gray {  
  margin: 20px 0;  
}  
hr {  
  border: none;  
  border-top: 1px solid #000;  
}  
.hr-xs-Silver {  
  border: none;  
  border-top: 1px solid #c0c0c0;  
}  
.hr-sm-black {  
  border: none;  
  border-top: 2px solid #000;  
}  
.hr-sm-Silver {  
  border: none;  
  border-top: 2px solid #c0c0c0;  
}  
.hr-xs-gray {  
  border: none;  
  border-top: 1px solid #767676;  
}  
.hr-sm-gray {  
  border: none;  
  border-top: 2px solid #767676;  
}

hover effect of mouse a label

.hover-red a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-red:hover {  
  color: red;  
} /*Add the class name for the a tag separately*/  
.hover-yellow a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-yellow:hover {  
  color: #ffd700;  
} /*Add the class name for the a tag separately*/  
.hover-green a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-green:hover {  
  color: #70aa39;  
} /*Add the class name for the a tag separately*/  
.hover-blue a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-blue:hover {  
  color: blue;  
} /*Add the class name for the a tag separately*/  
.hover-gray a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-gray:hover {  
  color: #9c9c9c;  
} /*Add the class name for the a tag separately*/  
.underline a:hover,  
a.underline:hover {  
  text-decoration: underline;  
}

Shadow effect

.shadow-text-xs {  
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);  
} /*Intelligent compatible ie10 or above is not considered temporarily*/  
  
.shadow-xs {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */  
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */  
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */  
}  
.shadow-sm {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */  
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */  
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */  
}  
.shadow-md {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */  
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */  
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */  
}  
.shadow-lg {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */  
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */  
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */  
}

fillet

.border-radius-xs {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  
.border-radius-sm {  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-md {  
  -webkit-border-radius: 7px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-lg {  
  -webkit-border-radius: 9px;  
  -moz-border-radius: 9px;  
  border-radius: 9px;  
}

summary

If articles and notes can give you a little help or inspiration, please don't be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Clear floating

// Clear floating  
.clearfix:after {  
  content: "\00A0";  
  display: block;  
  visibility: hidden;  
  width: 0;  
  height: 0;  
  clear: both;  
  font-size: 0;  
  line-height: 0;  
  overflow: hidden;  
}  
.clearfix {  
  zoom: 1;  
}

Vertical horizontal center

Absolute positioning mode and known width and height

position: absolute;  
top: 50%;  
left: 50%;  
margin-top: -3em;  
margin-left: -7em;  
width: 14em;  
height: 6em;

Absolute positioning + unknown width and height + translate

position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
//Browser prefix required

flex easy horizontal vertical center (unknown width and height)

display: flex;  
align-items: center;  
justify-content: center;

Ellipsis at the end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width, suitable for single line display

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

Variable width, suitable for multi line and mobile display

overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 3;  
-webkit-box-orient: vertical;

Fuzzy effect of manufacturing text

We can do this when we want to create a fuzzy effect on the text

color: transparent;  
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Simple loading effect with animation

Let's implement a very simple loading effect

.loading:after {  
  display: inline-block;  
  overflow: hidden;  
  vertical-align: bottom;  
  content: "\2026";  
  -webkit-animation: ellipsis 2s infinite;  
}  
  
// Animation part  
@-webkit-keyframes ellipsis {  
  from {  
    width: 2px;  
  }  
  to {  
    width: 15px;  
  }  
}

Custom text selection style

// Note that you can only modify these two attributes font color select background color  
  
element::selection {  
  color: green;  
  background-color: pink;  
}  
element::-moz-selection {  
  color: green;  
  background-color: pink;  
}

Top corner sticker effect

Now let's go step by step to finish the leftmost effect

html

<div class="wrap">  
  <div class="ribbon">  
    <a href="#">Fork me on GitHub</a>  
  </div>  
</div>

css

/* Several settings of outer container  */  
.wrap {  
  width: 160px;  
  height: 160px;  
  overflow: hidden;  
  position: relative;  
  background-color: #f3f3f3;  
}  
  
.ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  position: absolute;  
  /* shadom */  
  -webkit-box-shadow: 0 0 10px #888;  
  -moz-box-shadow: 0 0 10px #888;  
  box-shadow: 0 0 10px #888;  
  /* rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* position */  
  left: -50px;  
  top: 40px;  
}  
  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* shadow */  
  text-shadow: 0 0 5px #444;  
}

input placeholder

When we set the placeholder property for some input types, sometimes we need to change the default style.

input::-webkit-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-moz-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-ms-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}

Mobile terminal can click the default border where the element goes

On mobile browsers, when you click a link or a clickable element defined by Javascript, a blue border will appear. To be honest, it's disgusting. How to remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

To achieve the effect similar to the drop cap in word, you can use the following code

element:first-letter {  
  float: left;  
  color: green;  
  font-size: 30px;  
}

Mistress triangle

We can use small triangles in many places. Next, let's draw triangles in four directions

.triangle {  
  /* Basic style */  
  border: solid 10px transparent;  
}  
/*lower*/  
.triangle.bottom {  
  border-top-color: green;  
}  
/*upper*/  
.triangle.top {  
  border-bottom-color: green;  
}  
/*Left*/  
.triangle.top {  
  border-right-color: green;  
}  
/*right*/  
.triangle.top {  
  border-left-color: green;  
}

Mouse hand type

In general, we want to add a mouse hand shape to the following elements

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],  
input[type="submit"],  
input[type="image"],  
input[type="button"],  
label[for],  
select,  
button {  
  cursor: pointer;  
}

Shielding the highlight effect of elements in Webkit mobile browser

When visiting the mobile website, you will find some gray boxes around the selected elements. Use the following code to block this style

-webkit-touch-callout: none;  
-webkit-user-select: none;  
-khtml-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;

Remove the default margin and padding for browsers with common tags

pre,code,legend,fieldset,blockquote … Etc. tags are not very common, so they are not listed one by one. If they are used in the project, you can write them separately

body,  
p,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
dl,  
dd,  
ul,  
ol,  
th,  
td,  
button,  
figure,  
input,  
textarea,  
form {  
  margin: 0;  
  padding: 0;  
}

Unified input, select, textarea width

The width of box models of input, select and textarea in different browsers is calculated differently, and they are unified into the most common content box

input,  
select,  
textarea {  
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;  
  box-sizing: content-box;  
}  
  
table {  
  /*table The distance between borders of adjacent cells is set to 0*/  
  border-spacing: 0;  
  /*By default, setting border to tr has no effect. If table has set border to merge mode: "border collapse: collapse;", it is OK*/  
  border-collapse: collapse;  
}

Remove the default border of some browser elements

acronym,fieldset … If other tags are not very common, they will not be listed one by one; if they are used in the project, they can be written separately

img,  
input,  
button,  
textarea {  
  border: none;  
  -webkit-appearance: none;  
}  
  
input {  
  /*Because input does not inherit the centering style of the parent element by default, set "text align: inherit"*/  
  text-align: inherit;  
}  
  
textarea {  
  /*textarea No zoom by default*/  
  resize: none;  
}

Cancel element outline style

Because some properties of the following elements do not inherit the parent node style, these properties of these elements are declared as properties of the parent element

a,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
input,  
select,  
button,  
option,  
textarea,  
optgroup {  
  font-family: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  line-height: inherit;  
  color: inherit;  
  outline: none;  
}

Remove the default text decoration for hyperlink elements

In addition, the dash and underline of del and ins labels are still very good, so they will not be removed

a {  
  text-decoration: none;  
}  
  
ol,  
ul {  
  /*In development, the list of UI design is too different from the original style, so the default list style of ol and ul is cancelled directly*/  
  list-style: none;  
}  
  
button,  
input[type="submit"],  
input[type="button"] {  
  /*The mouse is in the shape of "small hand", indicating that it can be clicked*/  
  cursor: pointer;  
}  
  
input::-moz-focus-inner {  
  /*The default "padding, border" when the input focus of some versions of Firefox is canceled*/  
  padding: 0;  
  border: 0;  
}

Cancel the action button of some browser digital input controls

input[type="number"] {  
  -moz-appearance: textfield;  
}  
  
input[type="number"]::-webkit-inner-spin-button,  
input[type="number"]::-webkit-outer-spin-button {  
  margin: 0;  
  -webkit-appearance: none;  
}

Enter the color setting of the control placeholder

input::-webkit-input-placeholder,  
textarea::-webkit-input-placeholder {  
  color: #999;  
}  
  
input:-moz-placeholder,  
textarea:-moz-placeholder {  
  color: #999;  
}  
  
input::-moz-placeholder,  
textarea::-moz-placeholder {  
  color: #999;  
}  
  
input:-ms-input-placeholder,  
textarea:-ms-input-placeholder {  
  color: #999;  
}  
  
template {  
  /*Because some browsing template s will be displayed, you need to hide*/  
  display: none;  
}

Position: short for fixed

.pf {  
  position: fixed;  
  /*chrome Kernel browser position: fixed to prevent jitter*/  
  -webkit-transform: translateZ(0);  
}

Use the principle of absolute positioning, width and height lifting, and center the element

.middle {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  margin: auto;  
}

Centering elements vertically with relative positioning in CSS3

.v-middle {  
  position: relative;  
  top: 50%;  
  -webkit-transform: -webkit-translateY(-50%);  
  -moz-transform: -moz-translateY(-50%);  
  -o-transform: -o-translateY(-50%);  
  transform: translateY(-50%);  
}

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

.bb {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

Single line text overflow display ellipsis "to = = > text overflow"

.to {  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

Initialize style

Different browsers have different default styles for each label. Sometimes we don't want to use the default style given by the browser. We can use reset.css to remove the default style

body,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
hr,  
p,  
blockquote,  
dl,  
dt,  
dd,  
ul,  
ol,  
li,  
pre,  
form,  
fieldset,  
legend,  
button,  
input,  
textarea,  
th,  
td {  
  margin: 0;  
  padding: 0;  
}  
body,  
button,  
input,  
select,  
textarea {  
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;  
}  
h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
  font-size: 100%;  
}  
address,  
cite,  
dfn,  
em,  
var {  
  font-style: normal;  
}  
code,  
kbd,  
pre,  
samp {  
  font-family: couriernew, courier, monospace;  
}  
small {  
  font-size: 12px;  
}  
ul,  
ol {  
  list-style: none;  
}  
a {  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
sup {  
  vertical-align: text-top;  
}  
sub {  
  vertical-align: text-bottom;  
}  
legend {  
  color: #000;  
}  
fieldset,  
img {  
  border: 0;  
}  
button,  
input,  
select,  
textarea {  
  font-size: 100%;  
}  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}

Force wrap / Auto wrap / force no wrap

/* Force no wrapping */  
div {  
  white-space: nowrap;  
}  
  
/* Automatic line feed */  
div {  
  word-wrap: break-word;  
  word-break: normal;  
}  
  
/* Force English word break */  
div {  
  word-break: break-all;  
}

Style of table boundary

table {  
  border: 1px solid #000;  
  padding: 0;  
  border-collapse: collapse;  
  table-layout: fixed;  
  margin-top: 10px;  
}  
table td {  
  height: 30px;  
  border: 1px solid #000;  
  background: #fff;  
  font-size: 15px;  
  padding: 3px 3px 3px 8px;  
  color: #000;  
  width: 160px;  
}

Absolute positioning and margin

When we know in advance the length and width of the element to be centered, we can use this method:

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  width: 160px;  
  height: 100px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-left: -80px; /* Half the width */  
  margin-top: -50px; /* Half the height */  
}

Absolute positioning and transform

When the elements to be centered are variable in width and height, we can use transform to offset the elements.

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);  
  text-align: center;  
}

line-height

Line height is actually row height. We can adjust the layout with row height!

However, there is a big disadvantage of this scheme: the copy must be single line, and if there are multiple lines, there will be problems with the set line height.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  line-height: 200px;  
}

table layout

Set display: table for the container element and display: table cell for the current element:

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: table;  
}  
.content {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center;  
}

flex layout

At the same time, the flex layout can also replace the problem that the line height scheme is not centered in some Android models.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
.content {  
  background-color: #ccc;  
  text-align: center;  
}

Picture top bottom left right center

.content {  
  width: 400px;  
  height: 400px;  
  border: 1px solid #ccc;  
  text-align: center;  
  display: table-cell;  
  vertical-align: middle;  
}

The html code is as follows:

<div class="content">  
  <img src="./4.jpg" alt="img" />  
</div>

Small bars on both sides of the title

Now we can use pseudo elements!

<div class="title">Title</div>

title {  
  color: #e1767c;  
  font-size: 0.3rem;  
  position: relative;  
  
  &:before,  
  &:after {  
    content: "";  
    position: absolute;  
    display: block;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate3d(-50%, -50%, 0);  
    transform: translate3d(-50%, -50%, 0);  
    border-top: 0.02rem solid #e1767c;  
    width: 0.4rem;  
  }  
  &:before {  
    margin-left: -1.2rem;  
  }  
  &:after {  
    margin-left: 1.2rem;  
  }  
}

Drawing elements with border attribute

In addition to being a simple drawing border, border can also draw arbitrary polygons such as triangles, trapezoids and stars. The following are two triangles and trapezoids drawn

<div class="triangle1"></div>  
<div class="triangle2"></div>  
<div class="trapezoid"></div>

.triangle1 {  
  /*Acute triangle*/  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 100px solid #249ff1;  
  border-left: 30px solid transparent;  
  border-right: 100px solid transparent;  
}  
.triangle2 {  
  /*right triangle*/  
  width: 0;  
  height: 0;  
  border-top: 80px solid transparent;  
  border-bottom: 80px solid #ff5b01;  
  border-left: 50px solid #ff5b01;  
  border-right: 50px solid transparent;  
}  
.trapezoid {  
  /*Trapezoid*/  
  width: 0;  
  height: 0;  
  border-top: none;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #13dbed;  
  border-left: 80px solid #13dbed;  
}

Drawing elements with border radius

Border radius is mainly used to draw the shapes of dots, circles, ellipses, rounded rectangles and so on. Here are two simple drawings.

<div class="circle"></div>  
<div class="ellipse"><div></div></div>

.circle,  
.ellipse {  
  width: 100px;  
  height: 100px;  
  background: #249ff1;  
  border-radius: 50%;  
}  
.ellipse {  
  width: 150px;  
  background: #ff9e01;  
}

But the border radius attribute can actually set up to 8 values, and many unexpected images can be obtained by changing 8 values

Drawing elements with box shadow

Three values: h-shadow v-shadow color
Four values: h-shadow v-shadow blur color
5 values: h-shadow v-shadow blur spread color
6 values: h-shadow v-shadow blur spread color inset

<div class="plus"></div>  
<div class="target"></div>

.plus {  
  width: 30px;  
  height: 30px;  
  margin-left: 50px; /*Because box shadow does not occupy space, it is often necessary to add margin to correct the position*/  
  background: #000;  
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;  
}  
.target {  
  width: 30px;  
  height: 30px;  
  background: red;  
  border-radius: 50%;  
  margin-left: 50px;  
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;  
}

Using CSS gradients to draw icons

The gradient property of CSS3 is very powerful. In theory, any graph can be drawn by gradient. The characteristics and use of gradient are enough to write a long article. Here is an example

<div class="gradient"></div>

.gradient {  
  position: relative;  
  width: 300px;  
  height: 300px;  
  border-radius: 50%;  
  background-color: silver;  
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),  
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(  
      335deg,  
      #b00 23px,  
      transparent 23px  
    ), linear-gradient(155deg, #d00 23px, transparent 23px);  
  background-size: 58px 58px;  
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;  
}

glass

.cup {  
  display: inline-block;  
  width: 0.9em;  
  height: 0.4em;  
  border: 0.25em solid;  
  border-bottom: 1.1em solid;  
  border-radius: 0 0 0.25em 0.25em;  
}  
cup:before {  
  position: absolute;  
  right: -0.6em;  
  top: 0;  
  width: 0.3em;  
  height: 0.8em;  
  border: 0.25em solid;  
  border-left: none;  
  border-radius: 0 0.25em 0.25em 0;  
  content: "";  
}

heart-shaped

.heart {  
  display: inline-block;  
  margin-top: 1.5em;  
  width: 50px;  
  height: 50px;  
  background: green;  
}  
.heart:before,  
.heart:after {  
  position: absolute;  
  width: 1em;  
  height: 1.6em;  
  background: #000;  
  border-radius: 50% 50% 0 0;  
  content: "";  
  bottom: 0;  
}  
.heart:before {  
  -webkit-transform: rotate(45deg);  
  -webkit-transform-origin: 100% 100%;  
  right: 0;  
  background: red;  
  opacity: 0.5;  
  z-index: 5;  
}  
.:after {  
  -webkit-transform: rotate(-45deg);  
  -webkit-transform-origin: 0 100%;  
  left: 0;  
  opacity: 0.8;  
}

camera

.camera {  
  display: inline-block;  
  border-style: solid;  
  border-width: 0.65em 0.9em;  
  border-radius: 0.1em;  
}  
.camera:before {  
  position: absolute;  
  top: -0.3em;  
  left: -0.3em;  
  width: 0.4em;  
  height: 0.4em;  
  border-radius: 50%;  
  border: 0.1em solid #fff;  
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;  
  content: "";  
}  
.camera:after {  
  position: absolute;  
  top: -0.5em;  
  left: 0.5em;  
  width: 0.2em;  
  border-top: 0.125em solid #fff;  
  content: "";  
}

Moon

.moon {  
  display: inline-block;  
  height: 1.5em;  
  width: 1.5em;  
  box-shadow: inset -0.4em 0 0;  
  border-radius: 2em;  
  transform: rotate(20deg);  
}

Floating class

General float list float image float

.float-left {  
  float: left;  
}  
.float-right {  
  float: right;  
}  
.float-li li,/*Defined on li parent element or ancestor element*/ li.float-li {  
  float: left;  
}  
.float-img img,/*Defined on img parent element or ancestor element*/ img.float-li {  
  float: left;  
}  
.float-span span,/*Defined on span parent element or ancestor element*/ span.float-span {  
  float: right;  
}

Background image embedding and positioning

.bg-img {  
  background-image: url("../img/bg.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg01-img {  
  background-image: url("../img/bg01.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg02-img {  
  background-image: url("../img/bg02.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg03-img {  
  background-image: url("../img/bg03.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg04-img {  
  background-image: url("../img/bg04.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}

Inheritance class

.inherit-width {  
  width: inherit;  
}  
.inherit-min-width {  
  min-width: inherit;  
}  
.inherit-height {  
  height: inherit;  
}  
.inherit-min-height {  
  min-height: inherit;  
}  
.inherit-color {  
  color: inherit;  
}

Text indentation

.text-indent {  
  text-indent: 2rem;  
}  
/*16px*/  
.text-indent-xs {  
  text-indent: 1.5rem;  
}  
/*12px*/  
.text-indent-sm {  
  text-indent: 1.7rem;  
}  
/*14px*/  
.text-indent-md {  
  text-indent: 2rem;  
}  
/*18px*/  
.text-indent-lg {  
  text-indent: 2.4rem;  
}  
/*20px*/

Row height

.line-height-xs {  
  line-height: 1.3rem;  
}  
.line-height-sm {  
  line-height: 1.5rem;  
}  
.line-height-md {  
  line-height: 1.7rem;  
}  
.line-height-lg {  
  line-height: 2rem;  
}  
  
.line-height-25x {  
  line-height: 25px;  
}  
.line-height-30x {  
  line-height: 30px;  
}

ul indentation

.ul-indent-xs {  
  margin-left: 0.5rem;  
}  
.ul-indent-sm {  
  margin-left: 1rem;  
}  
.ul-indent-md {  
  margin-left: 1.5rem;  
}  
.ul-indent-lg {  
  margin-left: 2rem;  
}  
.ol-list,  
.ul-list {  
  list-style: disc;  
}

Text truncation

.truncate {  
  max-width: 100%;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  
.hide {  
  display: none;  
}

Picture and video specifications

.img-max,  
.video-max {  
  width: 100%;  
  height: auto;  
}  
/*display Display mode*/  
.inline {  
  display: inline;  
}  
.inline-block {  
  display: inline-block;  
}  
.block {  
  display: block;  
}

Border style

.border-xs-black {  
  border: 1px solid #000;  
}  
.border-sm-black {  
  border: 2px solid #000;  
}  
.border-md-black {  
  border: 3px solid #000;  
}  
.border-lg-black {  
  border: 5px solid #000;  
}  
  
.border-xs-gray {  
  border: 1px solid #9c9c9c;  
}  
.border-sm-gray {  
  border: 2px solid #9c9c9c;  
}  
.border-md-gray {  
  border: 3px solid #9c9c9c;  
}  
.border-lg-gray {  
  border: 5px solid #9c9c9c;  
}

background color

.bg-white {  
  background: #fff !important;  
}  
.bg-black {  
  background: #1b1c1d !important;  
}  
.bg-gray {  
  background: #767676 !important;  
}  
.bg-light-gray {  
  background: #f8f7f7 !important;  
}  
.bg-yellow {  
  background: #fbbd08 !important;  
}  
.bg-orange {  
  background: #f2711c !important;  
}  
.bg-red {  
  background: #db2828 !important;  
}  
.bg-olive {  
  background: #b5cc18 !important;  
}  
.bg-green {  
  background: #21ba45 !important;  
}  
.bg-teal {  
  background: #00b5ad !important;  
}  
.bg-darkGreen {  
  background: #19a97b !important;  
}  
.bg-threeGreen {  
  background: #097c25 !important;  
}  
.bg-blue {  
  background: #2185d0 !important;  
}  
.bg-violet {  
  background: #6435c9 !important;  
}  
.bg-purple {  
  background: #a333c8 !important;  
}  
.bg-brown {  
  background: #a5673f !important;  
}

Divider presets

hr,  
.hr-xs-Silver,  
.hr-sm-black,  
.hr-sm-Silver,  
.hr-xs-gray,  
.hr-sm-gray {  
  margin: 20px 0;  
}  
hr {  
  border: none;  
  border-top: 1px solid #000;  
}  
.hr-xs-Silver {  
  border: none;  
  border-top: 1px solid #c0c0c0;  
}  
.hr-sm-black {  
  border: none;  
  border-top: 2px solid #000;  
}  
.hr-sm-Silver {  
  border: none;  
  border-top: 2px solid #c0c0c0;  
}  
.hr-xs-gray {  
  border: none;  
  border-top: 1px solid #767676;  
}  
.hr-sm-gray {  
  border: none;  
  border-top: 2px solid #767676;  
}

hover effect of mouse a label

.hover-red a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-red:hover {  
  color: red;  
} /*Add the class name for the a tag separately*/  
.hover-yellow a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-yellow:hover {  
  color: #ffd700;  
} /*Add the class name for the a tag separately*/  
.hover-green a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-green:hover {  
  color: #70aa39;  
} /*Add the class name for the a tag separately*/  
.hover-blue a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-blue:hover {  
  color: blue;  
} /*Add the class name for the a tag separately*/  
.hover-gray a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-gray:hover {  
  color: #9c9c9c;  
} /*Add the class name for the a tag separately*/  
.underline a:hover,  
a.underline:hover {  
  text-decoration: underline;  
}

Shadow effect

.shadow-text-xs {  
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);  
} /*Intelligent compatible ie10 or above is not considered temporarily*/  
  
.shadow-xs {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */  
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */  
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */  
}  
.shadow-sm {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */  
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */  
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */  
}  
.shadow-md {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */  
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */  
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */  
}  
.shadow-lg {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */  
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */  
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */  
}

fillet

.border-radius-xs {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  
.border-radius-sm {  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-md {  
  -webkit-border-radius: 7px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-lg {  
  -webkit-border-radius: 9px;  
  -moz-border-radius: 9px;  
  border-radius: 9px;  
}

summary

If articles and notes can give you a little help or inspiration, please don't be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Clear floating

// Clear floating  
.clearfix:after {  
  content: "\00A0";  
  display: block;  
  visibility: hidden;  
  width: 0;  
  height: 0;  
  clear: both;  
  font-size: 0;  
  line-height: 0;  
  overflow: hidden;  
}  
.clearfix {  
  zoom: 1;  
}

Vertical horizontal center

Absolute positioning mode and known width and height

position: absolute;  
top: 50%;  
left: 50%;  
margin-top: -3em;  
margin-left: -7em;  
width: 14em;  
height: 6em;

Absolute positioning + unknown width and height + translate

position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
//Browser prefix required

flex easy horizontal vertical center (unknown width and height)

display: flex;  
align-items: center;  
justify-content: center;

Ellipsis at the end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width, suitable for single line display

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

Variable width, suitable for multi line and mobile display

overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 3;  
-webkit-box-orient: vertical;

Fuzzy effect of manufacturing text

We can do this when we want to create a fuzzy effect on the text

color: transparent;  
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Simple loading effect with animation

Let's implement a very simple loading effect

.loading:after {  
  display: inline-block;  
  overflow: hidden;  
  vertical-align: bottom;  
  content: "\2026";  
  -webkit-animation: ellipsis 2s infinite;  
}  
  
// Animation part  
@-webkit-keyframes ellipsis {  
  from {  
    width: 2px;  
  }  
  to {  
    width: 15px;  
  }  
}

Custom text selection style

// Note that you can only modify these two attributes font color select background color  
  
element::selection {  
  color: green;  
  background-color: pink;  
}  
element::-moz-selection {  
  color: green;  
  background-color: pink;  
}

Top corner sticker effect

Now let's go step by step to finish the leftmost effect

html

<div class="wrap">  
  <div class="ribbon">  
    <a href="#">Fork me on GitHub</a>  
  </div>  
</div>

css

/* Several settings of outer container  */  
.wrap {  
  width: 160px;  
  height: 160px;  
  overflow: hidden;  
  position: relative;  
  background-color: #f3f3f3;  
}  
  
.ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  position: absolute;  
  /* shadom */  
  -webkit-box-shadow: 0 0 10px #888;  
  -moz-box-shadow: 0 0 10px #888;  
  box-shadow: 0 0 10px #888;  
  /* rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* position */  
  left: -50px;  
  top: 40px;  
}  
  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* shadow */  
  text-shadow: 0 0 5px #444;  
}

input placeholder

When we set the placeholder property for some input types, sometimes we need to change the default style.

input::-webkit-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-moz-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-ms-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}

Mobile terminal can click the default border where the element goes

On mobile browsers, when you click a link or a clickable element defined by Javascript, a blue border will appear. To be honest, it's disgusting. How to remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

To achieve the effect similar to the drop cap in word, you can use the following code

element:first-letter {  
  float: left;  
  color: green;  
  font-size: 30px;  
}

Mistress triangle

We can use small triangles in many places. Next, let's draw triangles in four directions

.triangle {  
  /* Basic style */  
  border: solid 10px transparent;  
}  
/*lower*/  
.triangle.bottom {  
  border-top-color: green;  
}  
/*upper*/  
.triangle.top {  
  border-bottom-color: green;  
}  
/*Left*/  
.triangle.top {  
  border-right-color: green;  
}  
/*right*/  
.triangle.top {  
  border-left-color: green;  
}

Mouse hand type

In general, we want to add a mouse hand shape to the following elements

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],  
input[type="submit"],  
input[type="image"],  
input[type="button"],  
label[for],  
select,  
button {  
  cursor: pointer;  
}

Shielding the highlight effect of elements in Webkit mobile browser

When visiting the mobile website, you will find some gray boxes around the selected elements. Use the following code to block this style

-webkit-touch-callout: none;  
-webkit-user-select: none;  
-khtml-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;

Remove the default margin and padding for browsers with common tags

pre,code,legend,fieldset,blockquote … Etc. tags are not very common, so they are not listed one by one. If they are used in the project, you can write them separately

body,  
p,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
dl,  
dd,  
ul,  
ol,  
th,  
td,  
button,  
figure,  
input,  
textarea,  
form {  
  margin: 0;  
  padding: 0;  
}

Unified input, select, textarea width

The width of box models of input, select and textarea in different browsers is calculated differently, and they are unified into the most common content box

input,  
select,  
textarea {  
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;  
  box-sizing: content-box;  
}  
  
table {  
  /*table The distance between borders of adjacent cells is set to 0*/  
  border-spacing: 0;  
  /*By default, setting border to tr has no effect. If table has set border to merge mode: "border collapse: collapse;", it is OK*/  
  border-collapse: collapse;  
}

Remove the default border of some browser elements

acronym,fieldset … If other tags are not very common, they will not be listed one by one; if they are used in the project, they can be written separately

img,  
input,  
button,  
textarea {  
  border: none;  
  -webkit-appearance: none;  
}  
  
input {  
  /*Because input does not inherit the centering style of the parent element by default, set "text align: inherit"*/  
  text-align: inherit;  
}  
  
textarea {  
  /*textarea No zoom by default*/  
  resize: none;  
}

Cancel element outline style

Because some properties of the following elements do not inherit the parent node style, these properties of these elements are declared as properties of the parent element

a,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
input,  
select,  
button,  
option,  
textarea,  
optgroup {  
  font-family: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  line-height: inherit;  
  color: inherit;  
  outline: none;  
}

Remove the default text decoration for hyperlink elements

In addition, the dash and underline of del and ins labels are still very good, so they will not be removed

a {  
  text-decoration: none;  
}  
  
ol,  
ul {  
  /*In development, the list of UI design is too different from the original style, so the default list style of ol and ul is cancelled directly*/  
  list-style: none;  
}  
  
button,  
input[type="submit"],  
input[type="button"] {  
  /*The mouse is in the shape of "small hand", indicating that it can be clicked*/  
  cursor: pointer;  
}  
  
input::-moz-focus-inner {  
  /*The default "padding, border" when the input focus of some versions of Firefox is canceled*/  
  padding: 0;  
  border: 0;  
}

Cancel the action button of some browser digital input controls

input[type="number"] {  
  -moz-appearance: textfield;  
}  
  
input[type="number"]::-webkit-inner-spin-button,  
input[type="number"]::-webkit-outer-spin-button {  
  margin: 0;  
  -webkit-appearance: none;  
}

Enter the color setting of the control placeholder

input::-webkit-input-placeholder,  
textarea::-webkit-input-placeholder {  
  color: #999;  
}  
  
input:-moz-placeholder,  
textarea:-moz-placeholder {  
  color: #999;  
}  
  
input::-moz-placeholder,  
textarea::-moz-placeholder {  
  color: #999;  
}  
  
input:-ms-input-placeholder,  
textarea:-ms-input-placeholder {  
  color: #999;  
}  
  
template {  
  /*Because some browsing template s will be displayed, you need to hide*/  
  display: none;  
}

Position: short for fixed

.pf {  
  position: fixed;  
  /*chrome Kernel browser position: fixed to prevent jitter*/  
  -webkit-transform: translateZ(0);  
}

Use the principle of absolute positioning, width and height lifting, and center the element

.middle {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  margin: auto;  
}

Centering elements vertically with relative positioning in CSS3

.v-middle {  
  position: relative;  
  top: 50%;  
  -webkit-transform: -webkit-translateY(-50%);  
  -moz-transform: -moz-translateY(-50%);  
  -o-transform: -o-translateY(-50%);  
  transform: translateY(-50%);  
}

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

.bb {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

Single line text overflow display ellipsis "to = = > text overflow"

.to {  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

Initialize style

Different browsers have different default styles for each label. Sometimes we don't want to use the default style given by the browser. We can use reset.css to remove the default style

body,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
hr,  
p,  
blockquote,  
dl,  
dt,  
dd,  
ul,  
ol,  
li,  
pre,  
form,  
fieldset,  
legend,  
button,  
input,  
textarea,  
th,  
td {  
  margin: 0;  
  padding: 0;  
}  
body,  
button,  
input,  
select,  
textarea {  
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;  
}  
h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
  font-size: 100%;  
}  
address,  
cite,  
dfn,  
em,  
var {  
  font-style: normal;  
}  
code,  
kbd,  
pre,  
samp {  
  font-family: couriernew, courier, monospace;  
}  
small {  
  font-size: 12px;  
}  
ul,  
ol {  
  list-style: none;  
}  
a {  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
sup {  
  vertical-align: text-top;  
}  
sub {  
  vertical-align: text-bottom;  
}  
legend {  
  color: #000;  
}  
fieldset,  
img {  
  border: 0;  
}  
button,  
input,  
select,  
textarea {  
  font-size: 100%;  
}  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}

Force wrap / Auto wrap / force no wrap

/* Force no wrapping */  
div {  
  white-space: nowrap;  
}  
  
/* Automatic line feed */  
div {  
  word-wrap: break-word;  
  word-break: normal;  
}  
  
/* Force English word break */  
div {  
  word-break: break-all;  
}

Style of table boundary

table {  
  border: 1px solid #000;  
  padding: 0;  
  border-collapse: collapse;  
  table-layout: fixed;  
  margin-top: 10px;  
}  
table td {  
  height: 30px;  
  border: 1px solid #000;  
  background: #fff;  
  font-size: 15px;  
  padding: 3px 3px 3px 8px;  
  color: #000;  
  width: 160px;  
}

Absolute positioning and margin

When we know in advance the length and width of the element to be centered, we can use this method:

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  width: 160px;  
  height: 100px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-left: -80px; /* Half the width */  
  margin-top: -50px; /* Half the height */  
}

Absolute positioning and transform

When the elements to be centered are variable in width and height, we can use transform to offset the elements.

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);  
  text-align: center;  
}

line-height

Line height is actually row height. We can adjust the layout with row height!

However, there is a big disadvantage of this scheme: the copy must be single line, and if there are multiple lines, there will be problems with the set line height.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  line-height: 200px;  
}

table layout

Set display: table for the container element and display: table cell for the current element:

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: table;  
}  
.content {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center;  
}

flex layout

At the same time, the flex layout can also replace the problem that the line height scheme is not centered in some Android models.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
.content {  
  background-color: #ccc;  
  text-align: center;  
}

Picture top bottom left right center

.content {  
  width: 400px;  
  height: 400px;  
  border: 1px solid #ccc;  
  text-align: center;  
  display: table-cell;  
  vertical-align: middle;  
}

The html code is as follows:

<div class="content">  
  <img src="./4.jpg" alt="img" />  
</div>

Small bars on both sides of the title

Now we can use pseudo elements!

<div class="title">Title</div>

title {  
  color: #e1767c;  
  font-size: 0.3rem;  
  position: relative;  
  
  &:before,  
  &:after {  
    content: "";  
    position: absolute;  
    display: block;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate3d(-50%, -50%, 0);  
    transform: translate3d(-50%, -50%, 0);  
    border-top: 0.02rem solid #e1767c;  
    width: 0.4rem;  
  }  
  &:before {  
    margin-left: -1.2rem;  
  }  
  &:after {  
    margin-left: 1.2rem;  
  }  
}

Drawing elements with border attribute

In addition to being a simple drawing border, border can also draw arbitrary polygons such as triangles, trapezoids and stars. The following are two triangles and trapezoids drawn

<div class="triangle1"></div>  
<div class="triangle2"></div>  
<div class="trapezoid"></div>

.triangle1 {  
  /*Acute triangle*/  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 100px solid #249ff1;  
  border-left: 30px solid transparent;  
  border-right: 100px solid transparent;  
}  
.triangle2 {  
  /*right triangle*/  
  width: 0;  
  height: 0;  
  border-top: 80px solid transparent;  
  border-bottom: 80px solid #ff5b01;  
  border-left: 50px solid #ff5b01;  
  border-right: 50px solid transparent;  
}  
.trapezoid {  
  /*Trapezoid*/  
  width: 0;  
  height: 0;  
  border-top: none;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #13dbed;  
  border-left: 80px solid #13dbed;  
}

Drawing elements with border radius

Border radius is mainly used to draw the shapes of dots, circles, ellipses, rounded rectangles and so on. Here are two simple drawings.

<div class="circle"></div>  
<div class="ellipse"><div></div></div>

.circle,  
.ellipse {  
  width: 100px;  
  height: 100px;  
  background: #249ff1;  
  border-radius: 50%;  
}  
.ellipse {  
  width: 150px;  
  background: #ff9e01;  
}

But the border radius attribute can actually set up to 8 values, and many unexpected images can be obtained by changing 8 values

Drawing elements with box shadow

Three values: h-shadow v-shadow color
Four values: h-shadow v-shadow blur color
5 values: h-shadow v-shadow blur spread color
6 values: h-shadow v-shadow blur spread color inset

<div class="plus"></div>  
<div class="target"></div>

.plus {  
  width: 30px;  
  height: 30px;  
  margin-left: 50px; /*Because box shadow does not occupy space, it is often necessary to add margin to correct the position*/  
  background: #000;  
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;  
}  
.target {  
  width: 30px;  
  height: 30px;  
  background: red;  
  border-radius: 50%;  
  margin-left: 50px;  
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;  
}

Using CSS gradients to draw icons

The gradient property of CSS3 is very powerful. In theory, any graph can be drawn by gradient. The characteristics and use of gradient are enough to write a long article. Here is an example

<div class="gradient"></div>

.gradient {  
  position: relative;  
  width: 300px;  
  height: 300px;  
  border-radius: 50%;  
  background-color: silver;  
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),  
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(  
      335deg,  
      #b00 23px,  
      transparent 23px  
    ), linear-gradient(155deg, #d00 23px, transparent 23px);  
  background-size: 58px 58px;  
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;  
}

glass

.cup {  
  display: inline-block;  
  width: 0.9em;  
  height: 0.4em;  
  border: 0.25em solid;  
  border-bottom: 1.1em solid;  
  border-radius: 0 0 0.25em 0.25em;  
}  
cup:before {  
  position: absolute;  
  right: -0.6em;  
  top: 0;  
  width: 0.3em;  
  height: 0.8em;  
  border: 0.25em solid;  
  border-left: none;  
  border-radius: 0 0.25em 0.25em 0;  
  content: "";  
}

heart-shaped

.heart {  
  display: inline-block;  
  margin-top: 1.5em;  
  width: 50px;  
  height: 50px;  
  background: green;  
}  
.heart:before,  
.heart:after {  
  position: absolute;  
  width: 1em;  
  height: 1.6em;  
  background: #000;  
  border-radius: 50% 50% 0 0;  
  content: "";  
  bottom: 0;  
}  
.heart:before {  
  -webkit-transform: rotate(45deg);  
  -webkit-transform-origin: 100% 100%;  
  right: 0;  
  background: red;  
  opacity: 0.5;  
  z-index: 5;  
}  
.:after {  
  -webkit-transform: rotate(-45deg);  
  -webkit-transform-origin: 0 100%;  
  left: 0;  
  opacity: 0.8;  
}

camera

.camera {  
  display: inline-block;  
  border-style: solid;  
  border-width: 0.65em 0.9em;  
  border-radius: 0.1em;  
}  
.camera:before {  
  position: absolute;  
  top: -0.3em;  
  left: -0.3em;  
  width: 0.4em;  
  height: 0.4em;  
  border-radius: 50%;  
  border: 0.1em solid #fff;  
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;  
  content: "";  
}  
.camera:after {  
  position: absolute;  
  top: -0.5em;  
  left: 0.5em;  
  width: 0.2em;  
  border-top: 0.125em solid #fff;  
  content: "";  
}

Moon

.moon {  
  display: inline-block;  
  height: 1.5em;  
  width: 1.5em;  
  box-shadow: inset -0.4em 0 0;  
  border-radius: 2em;  
  transform: rotate(20deg);  
}

Floating class

General float list float image float

.float-left {  
  float: left;  
}  
.float-right {  
  float: right;  
}  
.float-li li,/*Defined on li parent element or ancestor element*/ li.float-li {  
  float: left;  
}  
.float-img img,/*Defined on img parent element or ancestor element*/ img.float-li {  
  float: left;  
}  
.float-span span,/*Defined on span parent element or ancestor element*/ span.float-span {  
  float: right;  
}

Background image embedding and positioning

.bg-img {  
  background-image: url("../img/bg.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg01-img {  
  background-image: url("../img/bg01.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg02-img {  
  background-image: url("../img/bg02.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg03-img {  
  background-image: url("../img/bg03.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg04-img {  
  background-image: url("../img/bg04.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}

Inheritance class

.inherit-width {  
  width: inherit;  
}  
.inherit-min-width {  
  min-width: inherit;  
}  
.inherit-height {  
  height: inherit;  
}  
.inherit-min-height {  
  min-height: inherit;  
}  
.inherit-color {  
  color: inherit;  
}

Text indentation

.text-indent {  
  text-indent: 2rem;  
}  
/*16px*/  
.text-indent-xs {  
  text-indent: 1.5rem;  
}  
/*12px*/  
.text-indent-sm {  
  text-indent: 1.7rem;  
}  
/*14px*/  
.text-indent-md {  
  text-indent: 2rem;  
}  
/*18px*/  
.text-indent-lg {  
  text-indent: 2.4rem;  
}  
/*20px*/

Row height

.line-height-xs {  
  line-height: 1.3rem;  
}  
.line-height-sm {  
  line-height: 1.5rem;  
}  
.line-height-md {  
  line-height: 1.7rem;  
}  
.line-height-lg {  
  line-height: 2rem;  
}  
  
.line-height-25x {  
  line-height: 25px;  
}  
.line-height-30x {  
  line-height: 30px;  
}

ul indentation

.ul-indent-xs {  
  margin-left: 0.5rem;  
}  
.ul-indent-sm {  
  margin-left: 1rem;  
}  
.ul-indent-md {  
  margin-left: 1.5rem;  
}  
.ul-indent-lg {  
  margin-left: 2rem;  
}  
.ol-list,  
.ul-list {  
  list-style: disc;  
}

Text truncation

.truncate {  
  max-width: 100%;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  
.hide {  
  display: none;  
}

Picture and video specifications

.img-max,  
.video-max {  
  width: 100%;  
  height: auto;  
}  
/*display Display mode*/  
.inline {  
  display: inline;  
}  
.inline-block {  
  display: inline-block;  
}  
.block {  
  display: block;  
}

Border style

.border-xs-black {  
  border: 1px solid #000;  
}  
.border-sm-black {  
  border: 2px solid #000;  
}  
.border-md-black {  
  border: 3px solid #000;  
}  
.border-lg-black {  
  border: 5px solid #000;  
}  
  
.border-xs-gray {  
  border: 1px solid #9c9c9c;  
}  
.border-sm-gray {  
  border: 2px solid #9c9c9c;  
}  
.border-md-gray {  
  border: 3px solid #9c9c9c;  
}  
.border-lg-gray {  
  border: 5px solid #9c9c9c;  
}

background color

.bg-white {  
  background: #fff !important;  
}  
.bg-black {  
  background: #1b1c1d !important;  
}  
.bg-gray {  
  background: #767676 !important;  
}  
.bg-light-gray {  
  background: #f8f7f7 !important;  
}  
.bg-yellow {  
  background: #fbbd08 !important;  
}  
.bg-orange {  
  background: #f2711c !important;  
}  
.bg-red {  
  background: #db2828 !important;  
}  
.bg-olive {  
  background: #b5cc18 !important;  
}  
.bg-green {  
  background: #21ba45 !important;  
}  
.bg-teal {  
  background: #00b5ad !important;  
}  
.bg-darkGreen {  
  background: #19a97b !important;  
}  
.bg-threeGreen {  
  background: #097c25 !important;  
}  
.bg-blue {  
  background: #2185d0 !important;  
}  
.bg-violet {  
  background: #6435c9 !important;  
}  
.bg-purple {  
  background: #a333c8 !important;  
}  
.bg-brown {  
  background: #a5673f !important;  
}

Divider presets

hr,  
.hr-xs-Silver,  
.hr-sm-black,  
.hr-sm-Silver,  
.hr-xs-gray,  
.hr-sm-gray {  
  margin: 20px 0;  
}  
hr {  
  border: none;  
  border-top: 1px solid #000;  
}  
.hr-xs-Silver {  
  border: none;  
  border-top: 1px solid #c0c0c0;  
}  
.hr-sm-black {  
  border: none;  
  border-top: 2px solid #000;  
}  
.hr-sm-Silver {  
  border: none;  
  border-top: 2px solid #c0c0c0;  
}  
.hr-xs-gray {  
  border: none;  
  border-top: 1px solid #767676;  
}  
.hr-sm-gray {  
  border: none;  
  border-top: 2px solid #767676;  
}

hover effect of mouse a label

.hover-red a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-red:hover {  
  color: red;  
} /*Add the class name for the a tag separately*/  
.hover-yellow a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-yellow:hover {  
  color: #ffd700;  
} /*Add the class name for the a tag separately*/  
.hover-green a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-green:hover {  
  color: #70aa39;  
} /*Add the class name for the a tag separately*/  
.hover-blue a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-blue:hover {  
  color: blue;  
} /*Add the class name for the a tag separately*/  
.hover-gray a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-gray:hover {  
  color: #9c9c9c;  
} /*Add the class name for the a tag separately*/  
.underline a:hover,  
a.underline:hover {  
  text-decoration: underline;  
}

Shadow effect

.shadow-text-xs {  
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);  
} /*Intelligent compatible ie10 or above is not considered temporarily*/  
  
.shadow-xs {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */  
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */  
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */  
}  
.shadow-sm {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */  
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */  
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */  
}  
.shadow-md {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */  
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */  
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */  
}  
.shadow-lg {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */  
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */  
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */  
}

fillet

.border-radius-xs {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  
.border-radius-sm {  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-md {  
  -webkit-border-radius: 7px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-lg {  
  -webkit-border-radius: 9px;  
  -moz-border-radius: 9px;  
  border-radius: 9px;  
}

summary

If articles and notes can give you a little help or inspiration, please don't be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Clear floating

// Clear floating  
.clearfix:after {  
  content: "\00A0";  
  display: block;  
  visibility: hidden;  
  width: 0;  
  height: 0;  
  clear: both;  
  font-size: 0;  
  line-height: 0;  
  overflow: hidden;  
}  
.clearfix {  
  zoom: 1;  
}

Vertical horizontal center

Absolute positioning mode and known width and height

position: absolute;  
top: 50%;  
left: 50%;  
margin-top: -3em;  
margin-left: -7em;  
width: 14em;  
height: 6em;

Absolute positioning + unknown width and height + translate

position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
//Browser prefix required

flex easy horizontal vertical center (unknown width and height)

display: flex;  
align-items: center;  
justify-content: center;

Ellipsis at the end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width, suitable for single line display

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

Variable width, suitable for multi line and mobile display

overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 3;  
-webkit-box-orient: vertical;

Fuzzy effect of manufacturing text

We can do this when we want to create a fuzzy effect on the text

color: transparent;  
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Simple loading effect with animation

Let's implement a very simple loading effect

.loading:after {  
  display: inline-block;  
  overflow: hidden;  
  vertical-align: bottom;  
  content: "\2026";  
  -webkit-animation: ellipsis 2s infinite;  
}  
  
// Animation part  
@-webkit-keyframes ellipsis {  
  from {  
    width: 2px;  
  }  
  to {  
    width: 15px;  
  }  
}

Custom text selection style

// Note that you can only modify these two attributes font color select background color  
  
element::selection {  
  color: green;  
  background-color: pink;  
}  
element::-moz-selection {  
  color: green;  
  background-color: pink;  
}

Top corner sticker effect

Now let's go step by step to finish the leftmost effect

html

<div class="wrap">  
  <div class="ribbon">  
    <a href="#">Fork me on GitHub</a>  
  </div>  
</div>

css

/* Several settings of outer container  */  
.wrap {  
  width: 160px;  
  height: 160px;  
  overflow: hidden;  
  position: relative;  
  background-color: #f3f3f3;  
}  
  
.ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  position: absolute;  
  /* shadom */  
  -webkit-box-shadow: 0 0 10px #888;  
  -moz-box-shadow: 0 0 10px #888;  
  box-shadow: 0 0 10px #888;  
  /* rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* position */  
  left: -50px;  
  top: 40px;  
}  
  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* shadow */  
  text-shadow: 0 0 5px #444;  
}

input placeholder

When we set the placeholder property for some input types, sometimes we need to change the default style.

input::-webkit-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-moz-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-ms-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}

Mobile terminal can click the default border where the element goes

On mobile browsers, when you click a link or a clickable element defined by Javascript, a blue border will appear. To be honest, it's disgusting. How to remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

To achieve the effect similar to the drop cap in word, you can use the following code

element:first-letter {  
  float: left;  
  color: green;  
  font-size: 30px;  
}

Mistress triangle

We can use small triangles in many places. Next, let's draw triangles in four directions

.triangle {  
  /* Basic style */  
  border: solid 10px transparent;  
}  
/*lower*/  
.triangle.bottom {  
  border-top-color: green;  
}  
/*upper*/  
.triangle.top {  
  border-bottom-color: green;  
}  
/*Left*/  
.triangle.top {  
  border-right-color: green;  
}  
/*right*/  
.triangle.top {  
  border-left-color: green;  
}

Mouse hand type

In general, we want to add a mouse hand shape to the following elements

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],  
input[type="submit"],  
input[type="image"],  
input[type="button"],  
label[for],  
select,  
button {  
  cursor: pointer;  
}

Shielding the highlight effect of elements in Webkit mobile browser

When visiting the mobile website, you will find some gray boxes around the selected elements. Use the following code to block this style

-webkit-touch-callout: none;  
-webkit-user-select: none;  
-khtml-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;

Remove the default margin and padding for browsers with common tags

pre,code,legend,fieldset,blockquote … Etc. tags are not very common, so they are not listed one by one. If they are used in the project, you can write them separately

body,  
p,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
dl,  
dd,  
ul,  
ol,  
th,  
td,  
button,  
figure,  
input,  
textarea,  
form {  
  margin: 0;  
  padding: 0;  
}

Unified input, select, textarea width

The width of box models of input, select and textarea in different browsers is calculated differently, and they are unified into the most common content box

input,  
select,  
textarea {  
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;  
  box-sizing: content-box;  
}  
  
table {  
  /*table The distance between borders of adjacent cells is set to 0*/  
  border-spacing: 0;  
  /*By default, setting border to tr has no effect. If table has set border to merge mode: "border collapse: collapse;", it is OK*/  
  border-collapse: collapse;  
}

Remove the default border of some browser elements

acronym,fieldset … If other tags are not very common, they will not be listed one by one; if they are used in the project, they can be written separately

img,  
input,  
button,  
textarea {  
  border: none;  
  -webkit-appearance: none;  
}  
  
input {  
  /*Because input does not inherit the centering style of the parent element by default, set "text align: inherit"*/  
  text-align: inherit;  
}  
  
textarea {  
  /*textarea No zoom by default*/  
  resize: none;  
}

Cancel element outline style

Because some properties of the following elements do not inherit the parent node style, these properties of these elements are declared as properties of the parent element

a,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
input,  
select,  
button,  
option,  
textarea,  
optgroup {  
  font-family: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  line-height: inherit;  
  color: inherit;  
  outline: none;  
}

Remove the default text decoration for hyperlink elements

In addition, the dash and underline of del and ins labels are still very good, so they will not be removed

a {  
  text-decoration: none;  
}  
  
ol,  
ul {  
  /*In development, the list of UI design is too different from the original style, so the default list style of ol and ul is cancelled directly*/  
  list-style: none;  
}  
  
button,  
input[type="submit"],  
input[type="button"] {  
  /*The mouse is in the shape of "small hand", indicating that it can be clicked*/  
  cursor: pointer;  
}  
  
input::-moz-focus-inner {  
  /*The default "padding, border" when the input focus of some versions of Firefox is canceled*/  
  padding: 0;  
  border: 0;  
}

Cancel the action button of some browser digital input controls

input[type="number"] {  
  -moz-appearance: textfield;  
}  
  
input[type="number"]::-webkit-inner-spin-button,  
input[type="number"]::-webkit-outer-spin-button {  
  margin: 0;  
  -webkit-appearance: none;  
}

Enter the color setting of the control placeholder

input::-webkit-input-placeholder,  
textarea::-webkit-input-placeholder {  
  color: #999;  
}  
  
input:-moz-placeholder,  
textarea:-moz-placeholder {  
  color: #999;  
}  
  
input::-moz-placeholder,  
textarea::-moz-placeholder {  
  color: #999;  
}  
  
input:-ms-input-placeholder,  
textarea:-ms-input-placeholder {  
  color: #999;  
}  
  
template {  
  /*Because some browsing template s will be displayed, you need to hide*/  
  display: none;  
}

Position: short for fixed

.pf {  
  position: fixed;  
  /*chrome Kernel browser position: fixed to prevent jitter*/  
  -webkit-transform: translateZ(0);  
}

Use the principle of absolute positioning, width and height lifting, and center the element

.middle {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  margin: auto;  
}

Centering elements vertically with relative positioning in CSS3

.v-middle {  
  position: relative;  
  top: 50%;  
  -webkit-transform: -webkit-translateY(-50%);  
  -moz-transform: -moz-translateY(-50%);  
  -o-transform: -o-translateY(-50%);  
  transform: translateY(-50%);  
}

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

.bb {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

Single line text overflow display ellipsis "to = = > text overflow"

.to {  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

Initialize style

Different browsers have different default styles for each label. Sometimes we don't want to use the default style given by the browser. We can use reset.css to remove the default style

body,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
hr,  
p,  
blockquote,  
dl,  
dt,  
dd,  
ul,  
ol,  
li,  
pre,  
form,  
fieldset,  
legend,  
button,  
input,  
textarea,  
th,  
td {  
  margin: 0;  
  padding: 0;  
}  
body,  
button,  
input,  
select,  
textarea {  
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;  
}  
h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
  font-size: 100%;  
}  
address,  
cite,  
dfn,  
em,  
var {  
  font-style: normal;  
}  
code,  
kbd,  
pre,  
samp {  
  font-family: couriernew, courier, monospace;  
}  
small {  
  font-size: 12px;  
}  
ul,  
ol {  
  list-style: none;  
}  
a {  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
sup {  
  vertical-align: text-top;  
}  
sub {  
  vertical-align: text-bottom;  
}  
legend {  
  color: #000;  
}  
fieldset,  
img {  
  border: 0;  
}  
button,  
input,  
select,  
textarea {  
  font-size: 100%;  
}  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}

Force wrap / Auto wrap / force no wrap

/* Force no wrapping */  
div {  
  white-space: nowrap;  
}  
  
/* Automatic line feed */  
div {  
  word-wrap: break-word;  
  word-break: normal;  
}  
  
/* Force English word break */  
div {  
  word-break: break-all;  
}

Style of table boundary

table {  
  border: 1px solid #000;  
  padding: 0;  
  border-collapse: collapse;  
  table-layout: fixed;  
  margin-top: 10px;  
}  
table td {  
  height: 30px;  
  border: 1px solid #000;  
  background: #fff;  
  font-size: 15px;  
  padding: 3px 3px 3px 8px;  
  color: #000;  
  width: 160px;  
}

Absolute positioning and margin

When we know in advance the length and width of the element to be centered, we can use this method:

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  width: 160px;  
  height: 100px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-left: -80px; /* Half the width */  
  margin-top: -50px; /* Half the height */  
}

Absolute positioning and transform

When the elements to be centered are variable in width and height, we can use transform to offset the elements.

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);  
  text-align: center;  
}

line-height

Line height is actually row height. We can adjust the layout with row height!

However, there is a big disadvantage of this scheme: the copy must be single line, and if there are multiple lines, there will be problems with the set line height.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  line-height: 200px;  
}

table layout

Set display: table for the container element and display: table cell for the current element:

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: table;  
}  
.content {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center;  
}

flex layout

At the same time, the flex layout can also replace the problem that the line height scheme is not centered in some Android models.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
.content {  
  background-color: #ccc;  
  text-align: center;  
}

Picture top bottom left right center

.content {  
  width: 400px;  
  height: 400px;  
  border: 1px solid #ccc;  
  text-align: center;  
  display: table-cell;  
  vertical-align: middle;  
}

The html code is as follows:

<div class="content">  
  <img src="./4.jpg" alt="img" />  
</div>

Small bars on both sides of the title

Now we can use pseudo elements!

<div class="title">Title</div>

title {  
  color: #e1767c;  
  font-size: 0.3rem;  
  position: relative;  
  
  &:before,  
  &:after {  
    content: "";  
    position: absolute;  
    display: block;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate3d(-50%, -50%, 0);  
    transform: translate3d(-50%, -50%, 0);  
    border-top: 0.02rem solid #e1767c;  
    width: 0.4rem;  
  }  
  &:before {  
    margin-left: -1.2rem;  
  }  
  &:after {  
    margin-left: 1.2rem;  
  }  
}

Drawing elements with border attribute

In addition to being a simple drawing border, border can also draw arbitrary polygons such as triangles, trapezoids and stars. The following are two triangles and trapezoids drawn

<div class="triangle1"></div>  
<div class="triangle2"></div>  
<div class="trapezoid"></div>

.triangle1 {  
  /*Acute triangle*/  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 100px solid #249ff1;  
  border-left: 30px solid transparent;  
  border-right: 100px solid transparent;  
}  
.triangle2 {  
  /*right triangle*/  
  width: 0;  
  height: 0;  
  border-top: 80px solid transparent;  
  border-bottom: 80px solid #ff5b01;  
  border-left: 50px solid #ff5b01;  
  border-right: 50px solid transparent;  
}  
.trapezoid {  
  /*Trapezoid*/  
  width: 0;  
  height: 0;  
  border-top: none;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #13dbed;  
  border-left: 80px solid #13dbed;  
}

Drawing elements with border radius

Border radius is mainly used to draw the shapes of dots, circles, ellipses, rounded rectangles and so on. Here are two simple drawings.

<div class="circle"></div>  
<div class="ellipse"><div></div></div>

.circle,  
.ellipse {  
  width: 100px;  
  height: 100px;  
  background: #249ff1;  
  border-radius: 50%;  
}  
.ellipse {  
  width: 150px;  
  background: #ff9e01;  
}

But the border radius attribute can actually set up to 8 values, and many unexpected images can be obtained by changing 8 values

Drawing elements with box shadow

Three values: h-shadow v-shadow color
Four values: h-shadow v-shadow blur color
5 values: h-shadow v-shadow blur spread color
6 values: h-shadow v-shadow blur spread color inset

<div class="plus"></div>  
<div class="target"></div>

.plus {  
  width: 30px;  
  height: 30px;  
  margin-left: 50px; /*Because box shadow does not occupy space, it is often necessary to add margin to correct the position*/  
  background: #000;  
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;  
}  
.target {  
  width: 30px;  
  height: 30px;  
  background: red;  
  border-radius: 50%;  
  margin-left: 50px;  
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;  
}

Using CSS gradients to draw icons

The gradient property of CSS3 is very powerful. In theory, any graph can be drawn by gradient. The characteristics and use of gradient are enough to write a long article. Here is an example

<div class="gradient"></div>

.gradient {  
  position: relative;  
  width: 300px;  
  height: 300px;  
  border-radius: 50%;  
  background-color: silver;  
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),  
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(  
      335deg,  
      #b00 23px,  
      transparent 23px  
    ), linear-gradient(155deg, #d00 23px, transparent 23px);  
  background-size: 58px 58px;  
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;  
}

glass

.cup {  
  display: inline-block;  
  width: 0.9em;  
  height: 0.4em;  
  border: 0.25em solid;  
  border-bottom: 1.1em solid;  
  border-radius: 0 0 0.25em 0.25em;  
}  
cup:before {  
  position: absolute;  
  right: -0.6em;  
  top: 0;  
  width: 0.3em;  
  height: 0.8em;  
  border: 0.25em solid;  
  border-left: none;  
  border-radius: 0 0.25em 0.25em 0;  
  content: "";  
}

heart-shaped

.heart {  
  display: inline-block;  
  margin-top: 1.5em;  
  width: 50px;  
  height: 50px;  
  background: green;  
}  
.heart:before,  
.heart:after {  
  position: absolute;  
  width: 1em;  
  height: 1.6em;  
  background: #000;  
  border-radius: 50% 50% 0 0;  
  content: "";  
  bottom: 0;  
}  
.heart:before {  
  -webkit-transform: rotate(45deg);  
  -webkit-transform-origin: 100% 100%;  
  right: 0;  
  background: red;  
  opacity: 0.5;  
  z-index: 5;  
}  
.:after {  
  -webkit-transform: rotate(-45deg);  
  -webkit-transform-origin: 0 100%;  
  left: 0;  
  opacity: 0.8;  
}

camera

.camera {  
  display: inline-block;  
  border-style: solid;  
  border-width: 0.65em 0.9em;  
  border-radius: 0.1em;  
}  
.camera:before {  
  position: absolute;  
  top: -0.3em;  
  left: -0.3em;  
  width: 0.4em;  
  height: 0.4em;  
  border-radius: 50%;  
  border: 0.1em solid #fff;  
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;  
  content: "";  
}  
.camera:after {  
  position: absolute;  
  top: -0.5em;  
  left: 0.5em;  
  width: 0.2em;  
  border-top: 0.125em solid #fff;  
  content: "";  
}

Moon

.moon {  
  display: inline-block;  
  height: 1.5em;  
  width: 1.5em;  
  box-shadow: inset -0.4em 0 0;  
  border-radius: 2em;  
  transform: rotate(20deg);  
}

Floating class

General float list float image float

.float-left {  
  float: left;  
}  
.float-right {  
  float: right;  
}  
.float-li li,/*Defined on li parent element or ancestor element*/ li.float-li {  
  float: left;  
}  
.float-img img,/*Defined on img parent element or ancestor element*/ img.float-li {  
  float: left;  
}  
.float-span span,/*Defined on span parent element or ancestor element*/ span.float-span {  
  float: right;  
}

Background image embedding and positioning

.bg-img {  
  background-image: url("../img/bg.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg01-img {  
  background-image: url("../img/bg01.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg02-img {  
  background-image: url("../img/bg02.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg03-img {  
  background-image: url("../img/bg03.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg04-img {  
  background-image: url("../img/bg04.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}

Inheritance class

.inherit-width {  
  width: inherit;  
}  
.inherit-min-width {  
  min-width: inherit;  
}  
.inherit-height {  
  height: inherit;  
}  
.inherit-min-height {  
  min-height: inherit;  
}  
.inherit-color {  
  color: inherit;  
}

Text indentation

.text-indent {  
  text-indent: 2rem;  
}  
/*16px*/  
.text-indent-xs {  
  text-indent: 1.5rem;  
}  
/*12px*/  
.text-indent-sm {  
  text-indent: 1.7rem;  
}  
/*14px*/  
.text-indent-md {  
  text-indent: 2rem;  
}  
/*18px*/  
.text-indent-lg {  
  text-indent: 2.4rem;  
}  
/*20px*/

Row height

.line-height-xs {  
  line-height: 1.3rem;  
}  
.line-height-sm {  
  line-height: 1.5rem;  
}  
.line-height-md {  
  line-height: 1.7rem;  
}  
.line-height-lg {  
  line-height: 2rem;  
}  
  
.line-height-25x {  
  line-height: 25px;  
}  
.line-height-30x {  
  line-height: 30px;  
}

ul indentation

.ul-indent-xs {  
  margin-left: 0.5rem;  
}  
.ul-indent-sm {  
  margin-left: 1rem;  
}  
.ul-indent-md {  
  margin-left: 1.5rem;  
}  
.ul-indent-lg {  
  margin-left: 2rem;  
}  
.ol-list,  
.ul-list {  
  list-style: disc;  
}

Text truncation

.truncate {  
  max-width: 100%;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  
.hide {  
  display: none;  
}

Picture and video specifications

.img-max,  
.video-max {  
  width: 100%;  
  height: auto;  
}  
/*display Display mode*/  
.inline {  
  display: inline;  
}  
.inline-block {  
  display: inline-block;  
}  
.block {  
  display: block;  
}

Border style

.border-xs-black {  
  border: 1px solid #000;  
}  
.border-sm-black {  
  border: 2px solid #000;  
}  
.border-md-black {  
  border: 3px solid #000;  
}  
.border-lg-black {  
  border: 5px solid #000;  
}  
  
.border-xs-gray {  
  border: 1px solid #9c9c9c;  
}  
.border-sm-gray {  
  border: 2px solid #9c9c9c;  
}  
.border-md-gray {  
  border: 3px solid #9c9c9c;  
}  
.border-lg-gray {  
  border: 5px solid #9c9c9c;  
}

background color

.bg-white {  
  background: #fff !important;  
}  
.bg-black {  
  background: #1b1c1d !important;  
}  
.bg-gray {  
  background: #767676 !important;  
}  
.bg-light-gray {  
  background: #f8f7f7 !important;  
}  
.bg-yellow {  
  background: #fbbd08 !important;  
}  
.bg-orange {  
  background: #f2711c !important;  
}  
.bg-red {  
  background: #db2828 !important;  
}  
.bg-olive {  
  background: #b5cc18 !important;  
}  
.bg-green {  
  background: #21ba45 !important;  
}  
.bg-teal {  
  background: #00b5ad !important;  
}  
.bg-darkGreen {  
  background: #19a97b !important;  
}  
.bg-threeGreen {  
  background: #097c25 !important;  
}  
.bg-blue {  
  background: #2185d0 !important;  
}  
.bg-violet {  
  background: #6435c9 !important;  
}  
.bg-purple {  
  background: #a333c8 !important;  
}  
.bg-brown {  
  background: #a5673f !important;  
}

Divider presets

hr,  
.hr-xs-Silver,  
.hr-sm-black,  
.hr-sm-Silver,  
.hr-xs-gray,  
.hr-sm-gray {  
  margin: 20px 0;  
}  
hr {  
  border: none;  
  border-top: 1px solid #000;  
}  
.hr-xs-Silver {  
  border: none;  
  border-top: 1px solid #c0c0c0;  
}  
.hr-sm-black {  
  border: none;  
  border-top: 2px solid #000;  
}  
.hr-sm-Silver {  
  border: none;  
  border-top: 2px solid #c0c0c0;  
}  
.hr-xs-gray {  
  border: none;  
  border-top: 1px solid #767676;  
}  
.hr-sm-gray {  
  border: none;  
  border-top: 2px solid #767676;  
}

hover effect of mouse a label

.hover-red a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-red:hover {  
  color: red;  
} /*Add the class name for the a tag separately*/  
.hover-yellow a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-yellow:hover {  
  color: #ffd700;  
} /*Add the class name for the a tag separately*/  
.hover-green a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-green:hover {  
  color: #70aa39;  
} /*Add the class name for the a tag separately*/  
.hover-blue a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-blue:hover {  
  color: blue;  
} /*Add the class name for the a tag separately*/  
.hover-gray a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-gray:hover {  
  color: #9c9c9c;  
} /*Add the class name for the a tag separately*/  
.underline a:hover,  
a.underline:hover {  
  text-decoration: underline;  
}

Shadow effect

.shadow-text-xs {  
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);  
} /*Intelligent compatible ie10 or above is not considered temporarily*/  
  
.shadow-xs {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */  
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */  
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */  
}  
.shadow-sm {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */  
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */  
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */  
}  
.shadow-md {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */  
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */  
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */  
}  
.shadow-lg {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */  
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */  
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */  
}

fillet

.border-radius-xs {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  
.border-radius-sm {  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-md {  
  -webkit-border-radius: 7px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-lg {  
  -webkit-border-radius: 9px;  
  -moz-border-radius: 9px;  
  border-radius: 9px;  
}

summary

If articles and notes can give you a little help or inspiration, please don't be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Clear floating

// Clear floating  
.clearfix:after {  
  content: "\00A0";  
  display: block;  
  visibility: hidden;  
  width: 0;  
  height: 0;  
  clear: both;  
  font-size: 0;  
  line-height: 0;  
  overflow: hidden;  
}  
.clearfix {  
  zoom: 1;  
}

Vertical horizontal center

Absolute positioning mode and known width and height

position: absolute;  
top: 50%;  
left: 50%;  
margin-top: -3em;  
margin-left: -7em;  
width: 14em;  
height: 6em;

Absolute positioning + unknown width and height + translate

position: absolute;  
left: 50%;  
top: 50%;  
transform: translate(-50%, -50%);  
//Browser prefix required

flex easy horizontal vertical center (unknown width and height)

display: flex;  
align-items: center;  
justify-content: center;

Ellipsis at the end of text

When the content of the text exceeds the width of the container, we want to add an ellipsis by default to prompt the user to omit the display of the content.

Fixed width, suitable for single line display

overflow: hidden;  
text-overflow: ellipsis;  
white-space: nowrap;

Variable width, suitable for multi line and mobile display

overflow: hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 3;  
-webkit-box-orient: vertical;

Fuzzy effect of manufacturing text

We can do this when we want to create a fuzzy effect on the text

color: transparent;  
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

Simple loading effect with animation

Let's implement a very simple loading effect

.loading:after {  
  display: inline-block;  
  overflow: hidden;  
  vertical-align: bottom;  
  content: "\2026";  
  -webkit-animation: ellipsis 2s infinite;  
}  
  
// Animation part  
@-webkit-keyframes ellipsis {  
  from {  
    width: 2px;  
  }  
  to {  
    width: 15px;  
  }  
}

Custom text selection style

// Note that you can only modify these two attributes font color select background color  
  
element::selection {  
  color: green;  
  background-color: pink;  
}  
element::-moz-selection {  
  color: green;  
  background-color: pink;  
}

Top corner sticker effect

Now let's go step by step to finish the leftmost effect

html

<div class="wrap">  
  <div class="ribbon">  
    <a href="#">Fork me on GitHub</a>  
  </div>  
</div>

css

/* Several settings of outer container  */  
.wrap {  
  width: 160px;  
  height: 160px;  
  overflow: hidden;  
  position: relative;  
  background-color: #f3f3f3;  
}  
  
.ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  position: absolute;  
  /* shadom */  
  -webkit-box-shadow: 0 0 10px #888;  
  -moz-box-shadow: 0 0 10px #888;  
  box-shadow: 0 0 10px #888;  
  /* rotate */  
  -webkit-transform: rotate(-45deg);  
  -moz-transform: rotate(-45deg);  
  -ms-transform: rotate(-45deg);  
  -o-transform: rotate(-45deg);  
  transform: rotate(-45deg);  
  /* position */  
  left: -50px;  
  top: 40px;  
}  
  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* shadow */  
  text-shadow: 0 0 5px #444;  
}

input placeholder

When we set the placeholder property for some input types, sometimes we need to change the default style.

input::-webkit-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-moz-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}  
input::-ms-input-placeholder {  
  color: green;  
  background-color: #f9f7f7;  
  font-size: 14px;  
}

Mobile terminal can click the default border where the element goes

On mobile browsers, when you click a link or a clickable element defined by Javascript, a blue border will appear. To be honest, it's disgusting. How to remove it?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

drop cap

To achieve the effect similar to the drop cap in word, you can use the following code

element:first-letter {  
  float: left;  
  color: green;  
  font-size: 30px;  
}

Mistress triangle

We can use small triangles in many places. Next, let's draw triangles in four directions

.triangle {  
  /* Basic style */  
  border: solid 10px transparent;  
}  
/*lower*/  
.triangle.bottom {  
  border-top-color: green;  
}  
/*upper*/  
.triangle.top {  
  border-bottom-color: green;  
}  
/*Left*/  
.triangle.top {  
  border-right-color: green;  
}  
/*right*/  
.triangle.top {  
  border-left-color: green;  
}

Mouse hand type

In general, we want to add a mouse hand shape to the following elements

a
submit
input[type="iamge"]
input[type="button"]
button
label
select

a[href],  
input[type="submit"],  
input[type="image"],  
input[type="button"],  
label[for],  
select,  
button {  
  cursor: pointer;  
}

Shielding the highlight effect of elements in Webkit mobile browser

When visiting the mobile website, you will find some gray boxes around the selected elements. Use the following code to block this style

-webkit-touch-callout: none;  
-webkit-user-select: none;  
-khtml-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;

Remove the default margin and padding for browsers with common tags

pre,code,legend,fieldset,blockquote … Etc. tags are not very common, so they are not listed one by one. If they are used in the project, you can write them separately

body,  
p,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
dl,  
dd,  
ul,  
ol,  
th,  
td,  
button,  
figure,  
input,  
textarea,  
form {  
  margin: 0;  
  padding: 0;  
}

Unified input, select, textarea width

The width of box models of input, select and textarea in different browsers is calculated differently, and they are unified into the most common content box

input,  
select,  
textarea {  
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;  
  box-sizing: content-box;  
}  
  
table {  
  /*table The distance between borders of adjacent cells is set to 0*/  
  border-spacing: 0;  
  /*By default, setting border to tr has no effect. If table has set border to merge mode: "border collapse: collapse;", it is OK*/  
  border-collapse: collapse;  
}

Remove the default border of some browser elements

acronym,fieldset … If other tags are not very common, they will not be listed one by one; if they are used in the project, they can be written separately

img,  
input,  
button,  
textarea {  
  border: none;  
  -webkit-appearance: none;  
}  
  
input {  
  /*Because input does not inherit the centering style of the parent element by default, set "text align: inherit"*/  
  text-align: inherit;  
}  
  
textarea {  
  /*textarea No zoom by default*/  
  resize: none;  
}

Cancel element outline style

Because some properties of the following elements do not inherit the parent node style, these properties of these elements are declared as properties of the parent element

a,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
input,  
select,  
button,  
option,  
textarea,  
optgroup {  
  font-family: inherit;  
  font-size: inherit;  
  font-weight: inherit;  
  font-style: inherit;  
  line-height: inherit;  
  color: inherit;  
  outline: none;  
}

Remove the default text decoration for hyperlink elements

In addition, the dash and underline of del and ins labels are still very good, so they will not be removed

a {  
  text-decoration: none;  
}  
  
ol,  
ul {  
  /*In development, the list of UI design is too different from the original style, so the default list style of ol and ul is cancelled directly*/  
  list-style: none;  
}  
  
button,  
input[type="submit"],  
input[type="button"] {  
  /*The mouse is in the shape of "small hand", indicating that it can be clicked*/  
  cursor: pointer;  
}  
  
input::-moz-focus-inner {  
  /*The default "padding, border" when the input focus of some versions of Firefox is canceled*/  
  padding: 0;  
  border: 0;  
}

Cancel the action button of some browser digital input controls

input[type="number"] {  
  -moz-appearance: textfield;  
}  
  
input[type="number"]::-webkit-inner-spin-button,  
input[type="number"]::-webkit-outer-spin-button {  
  margin: 0;  
  -webkit-appearance: none;  
}

Enter the color setting of the control placeholder

input::-webkit-input-placeholder,  
textarea::-webkit-input-placeholder {  
  color: #999;  
}  
  
input:-moz-placeholder,  
textarea:-moz-placeholder {  
  color: #999;  
}  
  
input::-moz-placeholder,  
textarea::-moz-placeholder {  
  color: #999;  
}  
  
input:-ms-input-placeholder,  
textarea:-ms-input-placeholder {  
  color: #999;  
}  
  
template {  
  /*Because some browsing template s will be displayed, you need to hide*/  
  display: none;  
}

Position: short for fixed

.pf {  
  position: fixed;  
  /*chrome Kernel browser position: fixed to prevent jitter*/  
  -webkit-transform: translateZ(0);  
}

Use the principle of absolute positioning, width and height lifting, and center the element

.middle {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  margin: auto;  
}

Centering elements vertically with relative positioning in CSS3

.v-middle {  
  position: relative;  
  top: 50%;  
  -webkit-transform: -webkit-translateY(-50%);  
  -moz-transform: -moz-translateY(-50%);  
  -o-transform: -o-translateY(-50%);  
  transform: translateY(-50%);  
}

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

.bb {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

Single line text overflow display ellipsis "to = = > text overflow"

.to {  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

Initialize style

Different browsers have different default styles for each label. Sometimes we don't want to use the default style given by the browser. We can use reset.css to remove the default style

body,  
h1,  
h2,  
h3,  
h4,  
h5,  
h6,  
hr,  
p,  
blockquote,  
dl,  
dt,  
dd,  
ul,  
ol,  
li,  
pre,  
form,  
fieldset,  
legend,  
button,  
input,  
textarea,  
th,  
td {  
  margin: 0;  
  padding: 0;  
}  
body,  
button,  
input,  
select,  
textarea {  
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;  
}  
h1,  
h2,  
h3,  
h4,  
h5,  
h6 {  
  font-size: 100%;  
}  
address,  
cite,  
dfn,  
em,  
var {  
  font-style: normal;  
}  
code,  
kbd,  
pre,  
samp {  
  font-family: couriernew, courier, monospace;  
}  
small {  
  font-size: 12px;  
}  
ul,  
ol {  
  list-style: none;  
}  
a {  
  text-decoration: none;  
}  
a:hover {  
  text-decoration: underline;  
}  
sup {  
  vertical-align: text-top;  
}  
sub {  
  vertical-align: text-bottom;  
}  
legend {  
  color: #000;  
}  
fieldset,  
img {  
  border: 0;  
}  
button,  
input,  
select,  
textarea {  
  font-size: 100%;  
}  
table {  
  border-collapse: collapse;  
  border-spacing: 0;  
}

Force wrap / Auto wrap / force no wrap

/* Force no wrapping */  
div {  
  white-space: nowrap;  
}  
  
/* Automatic line feed */  
div {  
  word-wrap: break-word;  
  word-break: normal;  
}  
  
/* Force English word break */  
div {  
  word-break: break-all;  
}

Style of table boundary

table {  
  border: 1px solid #000;  
  padding: 0;  
  border-collapse: collapse;  
  table-layout: fixed;  
  margin-top: 10px;  
}  
table td {  
  height: 30px;  
  border: 1px solid #000;  
  background: #fff;  
  font-size: 15px;  
  padding: 3px 3px 3px 8px;  
  color: #000;  
  width: 160px;  
}

Absolute positioning and margin

When we know in advance the length and width of the element to be centered, we can use this method:

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  width: 160px;  
  height: 100px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  margin-left: -80px; /* Half the width */  
  margin-top: -50px; /* Half the height */  
}

Absolute positioning and transform

When the elements to be centered are variable in width and height, we can use transform to offset the elements.

.container {  
  position: relative;  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  background-color: #ccc;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate3d(-50%, -50%, 0);  
  text-align: center;  
}

line-height

Line height is actually row height. We can adjust the layout with row height!

However, there is a big disadvantage of this scheme: the copy must be single line, and if there are multiple lines, there will be problems with the set line height.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
}  
.content {  
  line-height: 200px;  
}

table layout

Set display: table for the container element and display: table cell for the current element:

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: table;  
}  
.content {  
  display: table-cell;  
  vertical-align: middle;  
  text-align: center;  
}

flex layout

At the same time, the flex layout can also replace the problem that the line height scheme is not centered in some Android models.

.container {  
  width: 300px;  
  height: 200px;  
  border: 1px solid #333333;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  
.content {  
  background-color: #ccc;  
  text-align: center;  
}

Picture top bottom left right center

.content {  
  width: 400px;  
  height: 400px;  
  border: 1px solid #ccc;  
  text-align: center;  
  display: table-cell;  
  vertical-align: middle;  
}

The html code is as follows:

<div class="content">  
  <img src="./4.jpg" alt="img" />  
</div>

Small bars on both sides of the title

Now we can use pseudo elements!

<div class="title">Title</div>

title {  
  color: #e1767c;  
  font-size: 0.3rem;  
  position: relative;  
  
  &:before,  
  &:after {  
    content: "";  
    position: absolute;  
    display: block;  
    left: 50%;  
    top: 50%;  
    -webkit-transform: translate3d(-50%, -50%, 0);  
    transform: translate3d(-50%, -50%, 0);  
    border-top: 0.02rem solid #e1767c;  
    width: 0.4rem;  
  }  
  &:before {  
    margin-left: -1.2rem;  
  }  
  &:after {  
    margin-left: 1.2rem;  
  }  
}

Drawing elements with border attribute

In addition to being a simple drawing border, border can also draw arbitrary polygons such as triangles, trapezoids and stars. The following are two triangles and trapezoids drawn

<div class="triangle1"></div>  
<div class="triangle2"></div>  
<div class="trapezoid"></div>

.triangle1 {  
  /*Acute triangle*/  
  width: 0;  
  height: 0;  
  border-top: 50px solid transparent;  
  border-bottom: 100px solid #249ff1;  
  border-left: 30px solid transparent;  
  border-right: 100px solid transparent;  
}  
.triangle2 {  
  /*right triangle*/  
  width: 0;  
  height: 0;  
  border-top: 80px solid transparent;  
  border-bottom: 80px solid #ff5b01;  
  border-left: 50px solid #ff5b01;  
  border-right: 50px solid transparent;  
}  
.trapezoid {  
  /*Trapezoid*/  
  width: 0;  
  height: 0;  
  border-top: none;  
  border-right: 80px solid transparent;  
  border-bottom: 60px solid #13dbed;  
  border-left: 80px solid #13dbed;  
}

Drawing elements with border radius

Border radius is mainly used to draw the shapes of dots, circles, ellipses, rounded rectangles and so on. Here are two simple drawings.

<div class="circle"></div>  
<div class="ellipse"><div></div></div>

.circle,  
.ellipse {  
  width: 100px;  
  height: 100px;  
  background: #249ff1;  
  border-radius: 50%;  
}  
.ellipse {  
  width: 150px;  
  background: #ff9e01;  
}

But the border radius attribute can actually set up to 8 values, and many unexpected images can be obtained by changing 8 values

Drawing elements with box shadow

Three values: h-shadow v-shadow color
Four values: h-shadow v-shadow blur color
5 values: h-shadow v-shadow blur spread color
6 values: h-shadow v-shadow blur spread color inset

<div class="plus"></div>  
<div class="target"></div>

.plus {  
  width: 30px;  
  height: 30px;  
  margin-left: 50px; /*Because box shadow does not occupy space, it is often necessary to add margin to correct the position*/  
  background: #000;  
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;  
}  
.target {  
  width: 30px;  
  height: 30px;  
  background: red;  
  border-radius: 50%;  
  margin-left: 50px;  
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;  
}

Using CSS gradients to draw icons

The gradient property of CSS3 is very powerful. In theory, any graph can be drawn by gradient. The characteristics and use of gradient are enough to write a long article. Here is an example

<div class="gradient"></div>

.gradient {  
  position: relative;  
  width: 300px;  
  height: 300px;  
  border-radius: 50%;  
  background-color: silver;  
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),  
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(  
      335deg,  
      #b00 23px,  
      transparent 23px  
    ), linear-gradient(155deg, #d00 23px, transparent 23px);  
  background-size: 58px 58px;  
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;  
}

glass

.cup {  
  display: inline-block;  
  width: 0.9em;  
  height: 0.4em;  
  border: 0.25em solid;  
  border-bottom: 1.1em solid;  
  border-radius: 0 0 0.25em 0.25em;  
}  
cup:before {  
  position: absolute;  
  right: -0.6em;  
  top: 0;  
  width: 0.3em;  
  height: 0.8em;  
  border: 0.25em solid;  
  border-left: none;  
  border-radius: 0 0.25em 0.25em 0;  
  content: "";  
}

heart-shaped

.heart {  
  display: inline-block;  
  margin-top: 1.5em;  
  width: 50px;  
  height: 50px;  
  background: green;  
}  
.heart:before,  
.heart:after {  
  position: absolute;  
  width: 1em;  
  height: 1.6em;  
  background: #000;  
  border-radius: 50% 50% 0 0;  
  content: "";  
  bottom: 0;  
}  
.heart:before {  
  -webkit-transform: rotate(45deg);  
  -webkit-transform-origin: 100% 100%;  
  right: 0;  
  background: red;  
  opacity: 0.5;  
  z-index: 5;  
}  
.:after {  
  -webkit-transform: rotate(-45deg);  
  -webkit-transform-origin: 0 100%;  
  left: 0;  
  opacity: 0.8;  
}

camera

.camera {  
  display: inline-block;  
  border-style: solid;  
  border-width: 0.65em 0.9em;  
  border-radius: 0.1em;  
}  
.camera:before {  
  position: absolute;  
  top: -0.3em;  
  left: -0.3em;  
  width: 0.4em;  
  height: 0.4em;  
  border-radius: 50%;  
  border: 0.1em solid #fff;  
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;  
  content: "";  
}  
.camera:after {  
  position: absolute;  
  top: -0.5em;  
  left: 0.5em;  
  width: 0.2em;  
  border-top: 0.125em solid #fff;  
  content: "";  
}

Moon

.moon {  
  display: inline-block;  
  height: 1.5em;  
  width: 1.5em;  
  box-shadow: inset -0.4em 0 0;  
  border-radius: 2em;  
  transform: rotate(20deg);  
}

Floating class

General float list float image float

.float-left {  
  float: left;  
}  
.float-right {  
  float: right;  
}  
.float-li li,/*Defined on li parent element or ancestor element*/ li.float-li {  
  float: left;  
}  
.float-img img,/*Defined on img parent element or ancestor element*/ img.float-li {  
  float: left;  
}  
.float-span span,/*Defined on span parent element or ancestor element*/ span.float-span {  
  float: right;  
}

Background image embedding and positioning

.bg-img {  
  background-image: url("../img/bg.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg01-img {  
  background-image: url("../img/bg01.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg02-img {  
  background-image: url("../img/bg02.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg03-img {  
  background-image: url("../img/bg03.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}  
.bg04-img {  
  background-image: url("../img/bg04.png");  
  background-position: center top;  
  background-repeat: no-repeat;  
}

Inheritance class

.inherit-width {  
  width: inherit;  
}  
.inherit-min-width {  
  min-width: inherit;  
}  
.inherit-height {  
  height: inherit;  
}  
.inherit-min-height {  
  min-height: inherit;  
}  
.inherit-color {  
  color: inherit;  
}

Text indentation

.text-indent {  
  text-indent: 2rem;  
}  
/*16px*/  
.text-indent-xs {  
  text-indent: 1.5rem;  
}  
/*12px*/  
.text-indent-sm {  
  text-indent: 1.7rem;  
}  
/*14px*/  
.text-indent-md {  
  text-indent: 2rem;  
}  
/*18px*/  
.text-indent-lg {  
  text-indent: 2.4rem;  
}  
/*20px*/

Row height

.line-height-xs {  
  line-height: 1.3rem;  
}  
.line-height-sm {  
  line-height: 1.5rem;  
}  
.line-height-md {  
  line-height: 1.7rem;  
}  
.line-height-lg {  
  line-height: 2rem;  
}  
  
.line-height-25x {  
  line-height: 25px;  
}  
.line-height-30x {  
  line-height: 30px;  
}

ul indentation

.ul-indent-xs {  
  margin-left: 0.5rem;  
}  
.ul-indent-sm {  
  margin-left: 1rem;  
}  
.ul-indent-md {  
  margin-left: 1.5rem;  
}  
.ul-indent-lg {  
  margin-left: 2rem;  
}  
.ol-list,  
.ul-list {  
  list-style: disc;  
}

Text truncation

.truncate {  
  max-width: 100%;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
}  
.hide {  
  display: none;  
}

Picture and video specifications

.img-max,  
.video-max {  
  width: 100%;  
  height: auto;  
}  
/*display Display mode*/  
.inline {  
  display: inline;  
}  
.inline-block {  
  display: inline-block;  
}  
.block {  
  display: block;  
}

Border style

.border-xs-black {  
  border: 1px solid #000;  
}  
.border-sm-black {  
  border: 2px solid #000;  
}  
.border-md-black {  
  border: 3px solid #000;  
}  
.border-lg-black {  
  border: 5px solid #000;  
}  
  
.border-xs-gray {  
  border: 1px solid #9c9c9c;  
}  
.border-sm-gray {  
  border: 2px solid #9c9c9c;  
}  
.border-md-gray {  
  border: 3px solid #9c9c9c;  
}  
.border-lg-gray {  
  border: 5px solid #9c9c9c;  
}

background color

.bg-white {  
  background: #fff !important;  
}  
.bg-black {  
  background: #1b1c1d !important;  
}  
.bg-gray {  
  background: #767676 !important;  
}  
.bg-light-gray {  
  background: #f8f7f7 !important;  
}  
.bg-yellow {  
  background: #fbbd08 !important;  
}  
.bg-orange {  
  background: #f2711c !important;  
}  
.bg-red {  
  background: #db2828 !important;  
}  
.bg-olive {  
  background: #b5cc18 !important;  
}  
.bg-green {  
  background: #21ba45 !important;  
}  
.bg-teal {  
  background: #00b5ad !important;  
}  
.bg-darkGreen {  
  background: #19a97b !important;  
}  
.bg-threeGreen {  
  background: #097c25 !important;  
}  
.bg-blue {  
  background: #2185d0 !important;  
}  
.bg-violet {  
  background: #6435c9 !important;  
}  
.bg-purple {  
  background: #a333c8 !important;  
}  
.bg-brown {  
  background: #a5673f !important;  
}

Divider presets

hr,  
.hr-xs-Silver,  
.hr-sm-black,  
.hr-sm-Silver,  
.hr-xs-gray,  
.hr-sm-gray {  
  margin: 20px 0;  
}  
hr {  
  border: none;  
  border-top: 1px solid #000;  
}  
.hr-xs-Silver {  
  border: none;  
  border-top: 1px solid #c0c0c0;  
}  
.hr-sm-black {  
  border: none;  
  border-top: 2px solid #000;  
}  
.hr-sm-Silver {  
  border: none;  
  border-top: 2px solid #c0c0c0;  
}  
.hr-xs-gray {  
  border: none;  
  border-top: 1px solid #767676;  
}  
.hr-sm-gray {  
  border: none;  
  border-top: 2px solid #767676;  
}

hover effect of mouse a label

.hover-red a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-red:hover {  
  color: red;  
} /*Add the class name for the a tag separately*/  
.hover-yellow a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-yellow:hover {  
  color: #ffd700;  
} /*Add the class name for the a tag separately*/  
.hover-green a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-green:hover {  
  color: #70aa39;  
} /*Add the class name for the a tag separately*/  
.hover-blue a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-blue:hover {  
  color: blue;  
} /*Add the class name for the a tag separately*/  
.hover-gray a:hover,/*Add class name to ancestor element of a tag default no intelligent reminder*/ a.hover-gray:hover {  
  color: #9c9c9c;  
} /*Add the class name for the a tag separately*/  
.underline a:hover,  
a.underline:hover {  
  text-decoration: underline;  
}

Shadow effect

.shadow-text-xs {  
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);  
} /*Intelligent compatible ie10 or above is not considered temporarily*/  
  
.shadow-xs {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */  
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */  
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */  
}  
.shadow-sm {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */  
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */  
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */  
}  
.shadow-md {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */  
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */  
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */  
}  
.shadow-lg {  
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */  
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */  
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */  
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */  
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */  
}

fillet

.border-radius-xs {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  border-radius: 3px;  
}  
.border-radius-sm {  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-md {  
  -webkit-border-radius: 7px;  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  
.border-radius-lg {  
  -webkit-border-radius: 9px;  
  -moz-border-radius: 9px;  
  border-radius: 9px;  
}

summary

If articles and notes can give you a little help or inspiration, please don't be stingy with your praise and collection, your affirmation is the biggest driving force for me to move forward

Attach note link, read more high-quality articles in the past, and check them step by step. Like them, please give me some praise and encouragement https://github.com/Wscats/CV/issues/29

Posted by Vbabiy on Sat, 04 Apr 2020 18:24:33 -0700

Programmer Group

Step by step let you 55 necessary fragments to improve the efficiency of CSS development

Clear floating

Vertical horizontal center

Ellipsis at the end of text

Fuzzy effect of manufacturing text

Simple loading effect with animation

Custom text selection style

Top corner sticker effect

input placeholder

Mobile terminal can click the default border where the element goes

drop cap

Mistress triangle

Mouse hand type

Shielding the highlight effect of elements in Webkit mobile browser

Remove the default margin and padding for browsers with common tags

Unified input, select, textarea width

Remove the default border of some browser elements

Cancel element outline style

Remove the default text decoration for hyperlink elements

Cancel the action button of some browser digital input controls

Enter the color setting of the control placeholder

Position: short for fixed

Use the principle of absolute positioning, width and height lifting, and center the element

Centering elements vertically with relative positioning in CSS3

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"

Single line text overflow display ellipsis "to = = > text overflow"

Initialize style

Force wrap / Auto wrap / force no wrap

Style of table boundary

Absolute positioning and margin

Absolute positioning and transform

line-height

table layout

flex layout

Picture top bottom left right center

Small bars on both sides of the title

Drawing elements with border attribute

Drawing elements with border radius

Drawing elements with box shadow

Using CSS gradients to draw icons

Floating class

Background image embedding and positioning

Inheritance class

Text indentation

Row height

ul indentation

Text truncation

Picture and video specifications

Border style

background color

Divider presets

hover effect of mouse a label

Shadow effect

fillet

summary

Clear floating

Vertical horizontal center

Ellipsis at the end of text

Fuzzy effect of manufacturing text

Simple loading effect with animation

Custom text selection style

Top corner sticker effect

input placeholder

Mobile terminal can click the default border where the element goes

drop cap

Mistress triangle

Mouse hand type

Shielding the highlight effect of elements in Webkit mobile browser

Remove the default margin and padding for browsers with common tags

Unified input, select, textarea width

Remove the default border of some browser elements

Cancel element outline style

Remove the default text decoration for hyperlink elements

Cancel the action button of some browser digital input controls

Enter the color setting of the control placeholder

Position: short for fixed

Use the principle of absolute positioning, width and height lifting, and center the element

Centering elements vertically with relative positioning in CSS3

The box model for calculating the width and height of elements takes border as the outer boundary "BB = = > border box"