Getting web front-end to combat: the front master the necessary CSS fragments in development efficiency

This article will record we usually used to the CSS fragments, use these CSS can help us solve many practical problems encountered in the project, the wall cracked recommended thumbs collections look at, easy to find later

Clear float

Floating bring to our code of trouble, presumably do not need to say, we will use many ways to avoid this trouble, which I think is the most convenient and the best kind of compatibility is to create another directory at the same level <div> </ div>; however, this will increase the number of unused code. At this point we use: after pseudo-elements to solve this problem of floating, floating elements if the current level, then the parent can add on clearfix class.

// 清除浮动
.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 a world where the level of css simpler than centered to the vertical center number, after years of evolution, still no good way to let the elements vertically centered (in various ways have advantages and disadvantages, but can not achieve good compatibility, destructive small objects), the following are some common implementation

Absolute positioning known manner and the width and height

专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -7em;
width: 14em;
height: 6em;

Absolute positioning width + height + translate unknown

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
//需要补充浏览器前缀

flex easily get vertically centered horizontal (width and height unknown)

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

Add ellipsis end of the text

When the content of the text exceeds the width of the container, and we want to add an ellipsis in its default in order to achieve the effect of prompting the user to display the contents omitted.

A fixed width, a single line display for ...

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

The width is not fixed, and a mobile terminal for displaying a plurality of rows

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

Manufacturing blur text

When we want to give the text when manufacturing a vague feeling the effect, you can do so

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

Simple loading animation in effect

We come to realize a very simple loading effect

.loading:after {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  content: "\2026";
  -webkit-animation: ellipsis 2s infinite;
}

// 动画部分
@-webkit-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
}

Select the custom text styles

By default, we select the text on a web page when the selected part will give a dark blue background color (you can pick up their mouse to try), if we want to own custom styles of the selected part of it?

// 注意只能修改这两个属性 字体颜色 选中背景颜色

element::selection {
  color: green;
  background-color: pink;
}
element::-moz-selection {
  color: green;
  background-color: pink;
}

Vertex sticker effect

Sometimes we have such a demand, a list display page, there is a list of some new items are added, or heat higher, the effect will be asked to add a sticker on which the strip like a fork in hexo default blog me on github that the same effect.

Then we began to step through the effect of the leftmost

html

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

css

/* 外层容器几本设置  */
.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 give part of the input placeholder attribute type of setup time, sometimes need to modify its 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 end clickable elements place default border

On the mobile side browser, when you click on a link or by clicking Javascript can be defined elements, when there will be a blue border, to be honest, this is very disgusting, how to get rid of it?

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

Drop caps

To achieve a similar word in a drop cap effect You can use the following code

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

Small triangle

In many places we need them small triangle, then we draw about the four directions of the triangle

.triangle {
  /* 基础样式 */
  border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
  border-top-color: green;
}
/*上*/
.triangle.top {
  border-bottom-color: green;
}
/*左*/
.triangle.top {
  border-right-color: green;
}
/*右*/
.triangle.top {
  border-left-color: green;
}

It can be seen painting a small triangle is very simple, as long as you can get two lines of style, think of painting as long as the direction in which direction is set in the opposite direction style attributes can be

Mouse hand type

Under normal circumstances, we would like to add the following elements in the mouse hand type body

• 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;
}

Highlight shielding effect element Webkit mobile browser

When accessing the mobile site, you will find that there will be some gray frame around the selected element, use the following code this style shield

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

Removing labels commonly used browsers default margin and padding

pre, code, legend, fieldset, blockquote ... other labels is not very common, so I will not list them all, if you use the project, you can write your own separate

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

Different box model widths calculated for different browsers input, select, textarea, unity is the most common content-box

input,
select,
textarea {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

table {
  /*table 相邻单元格的边框间的距离设置为 0*/
  border-spacing: 0;
  /*默认情况下给 tr 设置 border 没有效果，如果 table 设置了边框为合并模式：「border-collapse: collapse;」就可以了*/
  border-collapse: collapse;
}

Remove the default browser, some elements of border

acronym, fieldset ... other labels are not very common, it will not list them; if used in the project, you can write yourself alone

img,
input,
button,
textarea {
  border: none;
  -webkit-appearance: none;
}

input {
  /*由于 input 默认不继承父元素的居中样式，所以设置：「text-align: inherit」*/
  text-align: inherit;
}

textarea {
  /*textarea 默认不可以放缩*/
  resize: none;
}

Cancellation elements outline style

As part of the property the following elements do not inherit the parent style, the declaration of these attributes of the parent element of these elements

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;
}

Cancellation hyperlink element of the default text decoration

Further del, ins underlined tag, underlined still very good, not removed

a {
  text-decoration: none;
}

ol,
ul {
  /*开发中 UI 设计的列表都是和原生的样式差太多，所以直接给取消 ol，ul 默认列表样式*/
  list-style: none;
}

button,
input[type="submit"],
input[type="button"] {
  /*鼠标经过是「小手」形状表示可点击*/
  cursor: pointer;
}

input::-moz-focus-inner {
  /*取消火狐浏览器部分版本 input 聚焦时默认的「padding、border」*/
  padding: 0;
  border: 0;
}

Browser button to cancel part of the 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;
}

Input control placeholder color settings # 999

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 {
  /*由于部分浏览 template 会显示出来，所以要隐*/
  display: none;
}

position: fixed abbreviations

.pf {
  position: fixed;
  /*chrome 内核 浏览器 position: fixed 防止抖动*/
  -webkit-transform: translateZ(0);
}

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

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

CSS3 using relatively positioned so that the vertical centering elements

专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

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

Element calculation of width and height of the box model to border outer limit "bb ==> border-box"

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

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

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

Initialization style

Different browsers default style for each tag is not the same, and sometimes we do not want to use the default browser style given, we can get rid of the default style with reset.css

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;
}

Forced Line / wrap / no wrap force

/* 强制不换行 */
div {
  white-space: nowrap;
}

/* 自动换行 */
div {
  word-wrap: break-word;
  word-break: normal;
}

/* 强制英文单词断行 */
div {
  word-break: break-all;
}

Style table border

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 want to know in advance the length and width of the middle element, you can use this approach:

.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; /* 宽度的一半 */
  margin-top: -50px; /* 高度的一半 */
}

Absolute positioning and transform

When you want to center elements variable width and height of a given time, so that we can use to transform elements offset.

.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 actually row height, we can use to adjust the row height layout!

But this program has a relatively big disadvantage is: copy must be single-line, multi-line, then set the row height will be a problem.

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

table layout

Container element is set to display: table, set the current element display: table-cell:

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

flex layout

We may be provided to the parent element is display: flex, using the align-items flex and justify-content in the vertical and horizontal directions is provided centrally. This method is not restricted width and height of the intermediate elements.

At the same time, flex layout can replace the program line-height issue in some Android models text is not centered.

.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 up and down the middle

One common way is to set the outer div table-cell; and let the vertical and horizontal center of the inner elements. Of course, there is a way, as is the img div, the reference code set 6.
CSS code is as follows:

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

html code is as follows:

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

Title both sides of the small bars

We often encounter such a demand UI, is the title of both sides there are two small Henggang, how to achieve it before? Border-top with such a property, then put in the middle of text absolute positioning, while a background color for the text, this portion of the middle of the cover.

Now we can use pseudo-elements to achieve!

<div class="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 simple border draw borders, it may also be an arbitrary polygon draw triangular, trapezoidal, star-like, triangular and trapezoidal the following two drawn

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

.triangle1 {
  /*锐角三角形*/
  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 {
  /*直角三角形*/
  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 {
  /*梯形*/
  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 a dot shape, round, oval, rounded rectangular, etc., the following two simple graphic drawing.

<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;
}

However, border-radius property may in fact be set up to eight values, the image can be obtained by varying the many unexpected value 8

Draw element with box-shadow

For the box-shadow, complete declaration of its box-shadow: Significance h-shadow v-shadow blur spread color inset, the respective values ​​are represented by: s cheap offset horizontal and vertical direction, distance blurring (feathering value), the size of the shadow (or not set to coincide with the body size of the shadow 0), and if the color of the shadow provided with a shadow. 3-6 may receive a practical value, respectively, corresponding to the following:

• 3 values: h-shadow v-shadow color
• Four values: h-shadow v-shadow blur color
• Five values: h-shadow v-shadow blur spread color
• 6 个值： h-shadow v-shadow blur spread color inset

Meanwhile, border-shadow comma-separated values accepted by the various values of a plurality of the above composition, by this feature, we can achieve effects such as multi-frame. Below we use this property to implement a single-label without the aid of pseudo-element to add icons and icons that represent the target of .

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

.plus {
  width: 30px;
  height: 30px;
  margin-left: 50px; /*由于box-shadow不占空间，常常需要添加margin来校正位置*/
  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;
}

Use CSS gradients to draw an icon

CSS3 gradient property is very strong, in theory, can draw out the characteristics and use of any graphics, gradient is enough to write a long article by the gradient, the following 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;
}

• cup

.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

Conventional float floating image floating list

.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-li li,/*定义到li父元素或祖先元素上*/ li.float-li {
  float: left;
}
.float-img img,/*定义到img父元素或祖先元素上*/ img.float-li {
  float: left;
}
.float-span span,/*定义到span父元素或祖先元素上*/ 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;
}

Inherited 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-indent

.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 indent

.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;
}

Truncated text

专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
.truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hide {
  display: none;
}

Pictures, videos specification

.img-max,
.video-max {
  width: 100%;
  height: auto;
}
/*display显示方式*/
.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;
}

Default dividing line

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;
}

A tag mouse hover effect

.hover-red a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-red:hover {
  color: red;
} /*单独为a标签添加类名*/
.hover-yellow a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-yellow:hover {
  color: #ffd700;
} /*单独为a标签添加类名*/
.hover-green a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-green:hover {
  color: #70aa39;
} /*单独为a标签添加类名*/
.hover-blue a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-blue:hover {
  color: blue;
} /*单独为a标签添加类名*/
.hover-gray a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-gray:hover {
  color: #9c9c9c;
} /*单独为a标签添加类名*/
.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);
} /*智能兼容ie10以上 暂不考虑*/

.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 */
}

Rounded

专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
.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;
}

If the articles and notes can take you a hint of inspiration or help, please do not mean your praise and collections, you must be a maximum of my motivation