Some interesting topics in CSS

Topic 1, below this graph, only uses one label, can have how many kinds of realization way:

Suppose our single-label is a DIV:

<div></div>

Define the following generic CSS:

div{

position:relative;

width:200px;

height:60px;

background:#ddd;

}

Law One: border

This should be the most easily thought out.

div{

border-left:5px solid deeppink;

}

method Two: Using pseudo-elements

A label, count on before and after pseudo-element, in fact, there are three tags, which is also a lot of single-label mapping basis, the subject, the use of pseudo-elements can be easily completed.

div::after{

content:"";

width:5px;

height:60px;

position:absolute;

top:0;

left:0;

background:deeppink;

}

Law III: outer Box-shadow

Box Shadow Box-shadow Most people just use to generate shadows, in fact the shadow can have multiple shadows, the shadow can not be empty, this need to understand the BOX-SHAODW each parameter specific role. Using BOX-SHAODW to solve problems

div{

Box-shadow:-5px 0px 0 0 deeppink;

}

Law IV: Inner Box-shadow

The box shadow also has a parameter inset, which can be used to set the inner shadow or complete:

div{

Box-shadow:inset 5px 0px 0 0 deeppink;

}

Law V: Drop-shadow

Drop-shadow is one of the filters in the CSS3 new filter filter, but it can also generate a shadow, but it has a numeric parameter of only 3, less than Box-shadow. can be viewed in w3cschool, very simple.

div{

filter:drop-shadow(-5px 0 0 deeppink);

}

Law vi: Gradient lineargradient

Flexible use CSS3 gradient can complete a lot of unexpected graphics, CSS3 gradient into linear gradient and radial gradient, the subject using linear gradient, can easily solve the problem:

div{

background-image:linear-gradient(90deg, deeppink 0px , Deeppink 5px, transparent 5px);

}

Law VII: Contour outline

This is used relatively little, outline (contour) is drawn around the element of a line, located at the edge of the bounding rectangle, can play the role of prominent elements. This method is considered the next choice.

div{

height:50px;

outline:5px solid deeppink;

}

Div{

position:absolute;

content:"";

top:-5px;

Bottom:-5px;

right:-5px;

left:0;

background:#ddd;

}

Law VIII, scroll bar

This method is provided by the blue ideal of a small match, which is achieved by changing the scroll bar style:

div{

width:205px;

background:deeppink;

overflow-y:scroll;

}

Div::-webkit-scrollbar{

width: 200px;

background-color:#ddd;

}

It's really a bright way to put aside the practicality and just simulate the pattern.

Some interesting topics in CSS