In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
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.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.