Always feel that these two pseudo class object is not very important, and IE to its two brothers do not support, so there is no static to study, only in the clear floating clearfix will use Ha, the others are rarely used! However, recently in the study of CSS3 feel that its two collocation can not only reduce the amount of code and can be a very Bahan effect, so to study ah!
First, look at their definition ha!
1, Selector:before (srules) it to use with the Content property, set in front of the object (based on the logical structure of the object tree) what happens;
2, Selector:after (srules) and before usage, but it is set after the object (based on the logical structure of the object tree) what happens;
Look at the examples easy to understand!
Run the results as shown! Why do I have to convert <span class= "block" > to chunk level elements? Because the block element inserts inline element does not conform to the standard, does not have the specification, does not translate the words to show the question. I don't know.
Now let's look at the CSS3.
Because of the use of CSS3, so it is still recommended under the Firefox preview!
Although more abstract, I do not say that you should not know is a bottle of the lid of the body part of the code is too much to post.
So before and after the use of good can save HTML tags, and with CSS3 to make a good effect, of course, do play, not too practical.
Second, the following incidentally said some CSS3 properties, (Border-radius&box-shadow) I was just slowly groping
Border-radius started!!
1, Border-radius:none | <length>{1,4} [/<length>{1,4}]?
Related properties: Border-top-right-radius Border-bottom-right-radius Border-bottom-left-radius Border-top-left-radius, In fact, Border-radius is a shorthand for their four attributes.
Value:<length> A length value consisting of floating-point numbers and unit identifiers, which cannot be negative.
Look at this picture, otherwise it's easy to faint.
Description
1, the first value that is X is the horizontal radius.
2. If the second omission is Y, then he is equal to the first value, at which point it is a rounded corner of One-fourth.
3, if any value is 0, then this corner is a rectangle, not a circle.
4, the value is not allowed to be negative.
When border-radius:<length>{1,4} [/<length>{1,4}]?
1, if the value before and after the slash is present, then the value before the slash is set to the horizontal radius (x), and the value after the slash is set to the vertical radius (y), and if there are no slashes, the horizontal and vertical radii are equal.
It is equal to One-fourth circles. such as: border-radius:46px/10px four corner of the radius of the size of 46px/10px.
The order of 2 and four values is in accordance with Top-left,top-right,bottom-right,bottom-left (anyway, clockwise?) Counterclockwise, huh? If bottom-left omitted it is equal to Top-right,
If bottom-right omit it is equal to Top-left, if top-right omit it equals top-left (somewhat diagonal relationship)
3, the application scope: applies all elements, except the table's style attribute is boder-collapse for collapse.
What do we see in common writing? And what is the corresponding explanation?
It's all very powerful! This URL is good: http://www.designcss.org/archives/border-radius.html So when you know you want more rounded shapes, you can show them by setting the exact values, I think it's very useful to have a good geometry. Ps:radius is the meaning of the radius, so use this property to make the effect of rounded corners, of course, can also make a circular effect, the principle: the square of the incircle radius is equal to half the length of the square side. Box-shadow started!!
The simple understanding is to let your box have a shadow effect, before many designers like to do this, but now toward the flat development, with less,
But existence has its own truth. It's good to use or it's pretty.
Syntax:box-shadow:< shadow type > <x axis displacement > <y Axis displacement > < shadow blur radius "? < Shadow expansion radius >?| | < shadow color > Shadow horizontal offset value positive negative value, vertical offset value desirable.
When the shadow type is not set, the default is projection, and when set to the inset property is an inner shadow, while the x-axis and y-axis are not equivalent but similar to the angle and position in PS. The shadow expansion radius is optional, but only positive, and if 0, there is no blur effect,
The extended radius is optional, the value can be positive or negative, if positive, the shadow extends and expands, and if it is negative, it shrinks. Shadow color is optional, if not set, the browser's default color, but the default color of each browser is different, so it is best
or set up a ha.
As shown in figure:
You can practice it as much as possible. Shadow size, expansion, color, and Photoshop are all the same.
such as: Box-shadow:inset 0 0 1px #fff表示没有偏移量, 1 pixel blur white interior shadow here the #fff is hex value.
Sometimes we write this: Box-shadow:inset 0 0 1px rgba (255,255,255,.5)
The advantage of using the RGBA value, the RGBA value, is that it has an alpha-transparent value, and you can control the opacity of the shadow.
Some want to write more complex, the effect is more dazzling, you can use more shadow. But note the order of the problem, the first written shadow will appear in the outermost layer, such as
. div{box-shadow:0 0 10px #F69, 0 0 10px 10px Yellow}
The display is as follows:
Look at the #f69 color value shown above the yellow. Because the yellow shadow expands by 10 pixels. It's wider than f69, so it won't be blocked by f69.
Here we look at a four-color shadow.
. div{box-shadow:-10px 0 Red, 10px 0 blue,0-10px yellow,0 10px Green; width:200px; height:100px; background: #6C9;}
The display is as follows:
See the picture may want to say, it is how to determine the red, blue, yellow, green position, why just on the four sides of the box? In fact, we are going to design shadows on four sides of the object by changing the positive negative values of x-offset and Y-offset, where the left shadow is generated when the x-offset is negative, the right shadow is generated when a positive value is generated, and a positive value is generated for the bottom shadow, and the top shadow when negative. If X-offset and Y-offset are set to 0 then the box will have a shadow for four weeks.
Let's set the fuzzy values for each of the four edges to see the effect.
box{width:200px height:100px;background: #6C9 box-shadow:-10px 0 10px Red, 10px 0 10px blue,0-10px 10px yellow,0 10px 1 0px Green;}
The display is as follows:
So we get the result: The Red Shadow is on the top yellow shadow, the right blue shadow on the bottom green shadow. So the writing of multiple shadows must pay attention to the order of the problem.
Especially when the fuzzy value is different,
Because you need to pay attention to a detail problem when using multiple layers of shading, if the previous shadow blur value is less than the shadow blur value behind it, then the front is displayed on the back,
If the blur value of the previous shadow is greater than the trailing shadow blur, the previous shadow will cover the shadow effect behind it
is not saliva too much, write too long still not logic ah? There's a problem with the title.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
