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

Use CSS3 to achieve fillet outline effect example analysis, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

First of all, outline is a very powerful thing.

1. Border's next of kin

Outline and border are close relatives. Why do you say that? First of all, they are all framed outside the element; second, the supported attribute values are almost the same, such as outline-style and border-style values dotted, dashed, solid,. And so on, some grammars are almost the same. If this is not a close relative, you let absolute positioning and floating what to say.

2. IE8+ support

Outline is strictly a CSS3 attribute, but IE8+ browsers support it. In a word, the outline of IE9+ browser also supports invert, especially for outline-color. So, if you don't care about IE6/IE7 browsers for your project, you can keep outline in mind, and sometimes it may help.

3. Do not occupy space

Under the default box model, assuming that the element is 100mm 100 pixels, and we set border:10px solid to the element, the actual size occupied by the element is at least 120mm 120 pixels. The offset and layout of the element need to be considered. However, outline is different, even if you outline:100px solid, the size of the element is still 100mm 100 pixels. This behavior is very similar to the CSS3 properties such as transform and box-shadow, although the shape is plump, but the real space occupied has no effect. So, when we implement some interactions, such as hover changes, we can focus on the effect itself without being swayed by the layout, which is a great experience.

4. Right angle! Round corners?

It's a connecting link between the preceding and the next.

Second, the right angle and fillet of outline

A row of right-angled pictures of 60'60 pixels, with 2 pixels highlighted with fillets in the selected frame. Browser compatibility requirements, IE9+ and other modern browsers.

Generally speaking, our first reaction is to use border + border-radius. However, there is a problem, that is, the external highlight border effect here is extended, you know, border will increase the size of the element, so, for our perfect alignment effect, we also need to reposition the selected element, the upper and lower left and right margin values need to be changed. I lose it, it bothers me to think about it!

UI performance like this is what outline is born to do. So we waved our hands:

CSS Code

Outline: 2px solid # 26C2A7

Dear friends, do not try to change the rounded corners of outline through border-radius. You know, outline and border are close relatives and grew up wearing open-crotch pants. However, the wife can not share! Border-radius and border are registered couple of Guangming. Look, even the surname is followed by the husband. People only recognize border, but you have no chance of outline. Find your wife to quench your thirst.

However, outline seems to be a single dog without a wife. Is outline doomed to be right-angled and unbent all his life?

Third, the fillet effect of outline

The vast CSS sea, at first glance, seems to have nothing to round the corner of outline. Pay attention to the wording, "it looks like". If we have sharp eyes, we will still find something hidden somewhere to round the corner of outline.

In the FireFox browser, there is outline-radius, a couple with rounded corners that match outline.

The relationship is the same as that between border and border-radius.

Since it is currently only a proprietary property of FireFox browsers, the current use requires a prefix of-moz-, that is,-moz-outline-radius.

The relevant CSS code is as follows:

CSS Code

Img {outline: 30px solid # cd0000;-moz-outline-radius: 30px;}

Is it very loose? If you look closely enough, you will find that there is a difference between outline-radius and border-radius. See? what's the difference? There is a prize for the right answer. Ha, yes, you all got the wrong answer! There is no difference. Outline-radius 's fillet rules, syntax and so on are the same as border-radius.

The only difference, that is, the compatibility problem, is not obvious, but trial-and-error. To tell you the sad news, at present, except FireFox browser supports outline-radius, other browsers are empty fart!

If it is only supported by webkit/blink browsers, it is okay to say that at least the mobile end can still be used. Get an only FireFox support, play with wool! No, I can't even play with wool!

Dear, do not despair ah, there must be a way to the front of the mountain, this way to enter …...

4. Box-shadow simulates the fillet effect of outline

Outline-radius is dead, but we can use other properties to achieve a similar effect, such as box-shadow.

We usually use the first three parameters, horizontal / vertical offset and blur size most often. Some friends may not know what the fourth optional parameter value is for. The fourth parameter value of box-shadow, out-of-name extension, can expand the projection range, of course, the expanded area is the solid color area. We can take advantage of this feature to simulate the outline solid color border effect that does not affect the size of the elements.

For an example, you can click here: CSS3 box-shadow simulates outline radius fillet Demo

The CSS code is as follows:

Img {border-radius: 1px; box-shadow: 00030px # cd0000;}

Many friends who use CSS3 should know that the projection shape of box-shadow is the same as that of border-radius, that is, border-radius is rounded and box-shadow projection is arc-shaped.

The following briefly explains the meaning of the next two lines of CSS code:

Border-radius: 1px represents a fillet size of 1 pixel. Some students may be surprised, how is 1 pixel, the screenshot fillet is obviously dozens of pixels, the following is just the explanation

Box-shadow: 000 30px # cd0000 has 4 values, namely horizontal offset 0, vertical offset 0, blur 0 (solid color), and extended size 30 pixels. We can imagine that the light shines directly from the top of the box, because there is no offset and no blur, and we can't see any shadows. In fact, the shadow of the box is exactly the size of the box (with 1 pixel fillet). At this time, expand 30 pixels, we can make up for it, and the shadow of 1 pixel fillet can be expanded by 30 pixels. Yo, that's the effect we need, isn't it the effect shown in the screenshot!

Know the left and right of border-radius 1 pixel, after expanding 30 pixels, the fillet is 30 pixels.

However, although it is invisible to the naked eye, the above method is actually flawed because the picture is not a pure right angle and has a 1-pixel fillet. If you want to achieve a perfect inner and outer circle effect, you can cover a layer of tags, and the outer tags use border-radius and box-shadow.

Three ways of introducing css 1. Inline style, the most straightforward and simplest, uses style= "" directly for HTML tags. two。 The embedded style is to write the CSS code in between and use the

To make a statement. 3. External style, in which the link style is the most frequently used and the most practical style, only need to add

Just do it. The second is to import styles, import styles and link styles are similar, using @ import style to import CSS stylesheets, not recommended. Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.