Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What are the skills of using Css3

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly shows you "what are the skills for the use of Css3", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the skills for using Css3" this article.

The classic css3 example this article mentions the following properties of css3:

Border-radius,:: after, attr and content, box-sizing, linear-gradient, radial-gradient, box-shadow

Border-radius

Believe that this attribute, as students who have written css know, is used to produce fillets, such as drawing a circle:

Div {

Width:100px

Height:100px

Background:red

Border-radius:100px; / / border-radius:100%

}

Then let's take a look at its syntax: border-radius: [top left] [top right] [bottom right] [bottom left], so let's draw a semicircle

Div {

Width: 100px

Height: 50px

Background: red

Border-radius: 50px 50px 0 0

}

What should I do if I want to draw an ellipse? You will find that the above syntax seems to be impossible, but there is also a syntax for the value of border-radius: X radius / y radius:

Div {

Width: 100px

Height: 50px

Background: red

Border-radius: 50px/25px

}

What if I want to draw half an ellipse?

Div {

Width: 100px

Height: 50px

Background: red

Border-radius: 100% 00% / 50%

}

:: after

To take a simple example, we are going to draw a magnifying glass, as shown below:

To analyze, this magnifying glass can consist of two div, one is a black ring, the other is a black handle (rotate 45 degrees). So we need to use two div to do this? The answer is NO, and so is a div. We can add an element with:: after. Similarly, if we need three div, we can add another element using:: before. Take a look at the code:

Div {

Width: 50px

Height: 50px

Border-radius: 50%

Border: 5px solid # 333

Position: relative

}

Div::after {

Content:''

Display: block

Width: 8px

Height: 60px

Border-radius: 5px

Background: # 333

Position: absolute

Right:-22px

Top: 38px

Transform: rotate (- 45deg)

}

Attr and content

For example, we need to implement the function of a floating prompt. Traditionally, you can do this using the title attribute, but now you can use the attr provided by css3: you can get an attribute value of an element in css and insert it into the content of a pseudo element.

Suppose our html code is as follows:

Hello...

Let's look at the css code that implements the plug-in:

Div {

Position: relative

}

Div:hover::after {

Content: attr (data-title); / / get the value of the data-title attribute

Display: inline-block

Padding: 10px 14px

Border: 1px solid # ddd

Border-radius: 5px

Position: absolute

Top:-50px

Left:-30px

}

When you hover, you add an element with the data-title attribute value at the end of the element, so the hover display is achieved, as shown in the following figure:

Box-sizing

We know that in the standard box model, the total width of the element = content + padding + border + margin. You may know the box model in css, but the properties of this box model may not be known by so many people. The box-sizing property is used to redefine this calculation method. It has three values: content-box (default), border-box, and padding-box.

In general, if we need to have a div with 200px, padding10px, and border5px, we will define the style in this way after calculation.

Div {

Width: 170px; / / the width here should be obtained using 200-10mm 2-5mm 2 = 170.

Height: 50px

Padding: 10px

Border: 5px solid red

}

Then let's use the box-sizing property.

Div {

Box-sizing: border-box

Width: 200px; / / the width here is the total width occupied by the element and does not need to be calculated.

Height: 50px

Padding: 10px

Border: 5px solid red

}

Linear-gradient

When making an activity page, we often encounter the following requirements:

There is a large banner image in the middle of the top, and then the background color of the whole area changes gradually according to the background color of the image. You can use this property.

Div {

Width: 200px

Height: 50px

Background: linear-gradient (to right, red, yellow, black, green)

}

Isn't it interesting? In fact, linear-gradient has more interesting features, which you can feel according to the following motion picture:

You think it's over? Wait, there's something more powerful! Repeating-linear-gradient, feel it:

Linear-gradient also has more powerful features, such as adding multiple gradients to elements to achieve a more NB effect.

Radial-gradient

The above linear-gradient is a linear gradient, and this property is a radial gradient. The following code implements a logo for chrome.

Div.chrome {

Width: 180px

Height: 180px

Border-radius: 50%

Box-shadow: 0 0 4px # 999, 0 0 2px # ddd inset

Background: radial-gradient (circle, # 4FACF5 0, # 2196F3 28%, transparent 28%)

Radial-gradient (circle, # fff 33%, transparent 33%)

Linear-gradient (- 50deg, # FFEB3B 34%, transparent 34%)

Linear-gradient (60deg, # 4CAF50 33%, transparent 33%)

Linear-gradient (180deg, # FF756B 0, # F44336 30%, transparent 30%)

Linear-gradient (- 120deg, # FFEB3B 40%, transparent 40%)

Linear-gradient (- 60deg, # FFEB3B 30%, transparent 30%)

Linear-gradient (0deg, # 4CAF50 45%, transparent 45%)

Linear-gradient (60deg, # 4CAF50 30%, transparent 30%)

Linear-gradient (120deg, # F4433650%, transparent 50%)

Linear-gradient (180deg, # F44336 30%, transparent 30%)

}

The realization principle is to use a number of gradient colors to put on the div, the friendship association is covered, visually produced the desired effect, is not very powerful! If you look at the picture below, you will know that you have actually added a lot of gradients to div.

The above is all the content of this article "what are the tips for using Css3?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report