Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "what are the practical CSS3 skills", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what are the practical CSS3 skills in the front end" can help you solve your doubts? let's follow the editor's way of thinking to learn new knowledge.

1. Black and white image

When you need to show a color picture as a black-and-white picture, you can use the following code.

Img.desaturate {

Filter: grayscale (100%)

-webkit-filter: grayscale

-moz-filter: grayscale

-ms-filter: grayscale

-o-filter: grayscale

The front end of the more practical CSS3 skills, there is always one you need!

Use: not () to apply / unapply borders on the menu

Add a border to each menu item first

The front end of the more practical CSS3 skills, there is always one you need!

.nav li {

Border-right: 1px solid # 666

And then remove the last element.

.nav li:last-child {

Border-right: none

You can also apply elements directly using the: not () pseudo class

.nav li:not (: last-child) {

Border-right: 1px solid # 666

If your element has a sibling element, you can also use the general bear end selector (~)

.nav li:first-child ~ li {

Border-left: 1px solid # 666

Third, shadow at the top of the page

Add a beautiful top shadow effect to the web page

Body:before {

Content:''

Position: fixed

Top:-10px

Left: 0

Width: 100%

Height: 10px

-webkit-box-shadow: 0px 0px 10px rgba (0pc0pl 0pr .8)

-moz-box-shadow: 0px 0px 10px rgba (0pc0pl 0pr .8)

Box-shadow: 0px 0px 10px rgba (0pd0j0j0pl .8)

Z-index: 100

The front end of the more practical CSS3 skills, there is always one you need!

Add line height to body

There is no need to add line heights to other things such as pforce h, just:

Body {

Line-height: 1

Everything is vertically centered

Html,body {

Height: 100%

Margin: 0

Body {

-webkit-align-items: center

-ms-flex-align: center

Align-items: center

Display:-webkit-flex

Display: flex

Need to pay attention to flexbox in IE11

VI. Comma separated list

Make the HTML list items look like they are being delimited by a real, delimited list

Ul > li:not (: last-child):: after {

Content: ",

Use negative nth-child to select items

Use negative nth-child in css to select items 1 to n

Li {

Display: none

Li:nth-child (- nasty 3) {

Display: block

Use SVG for icons

.logo {

Background: url ("logo.svg")

IX. Optimize the display of text

Sometimes fonts don't work best on all devices, so you can ask the device browser to help you.

Html {

-moz-osx-font-smoothing: grayscale

-webkit-font-smoothing: antialiased

Text-rendering: optimizelegibility

After reading this, the article "what are the practical CSS3 skills at the front end" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.