A tutorial of using CSS3 to realize the outline effect of fillet

first of all, outline is a very good thing.

1. Border close relatives

Outline and border are close relatives. First, it's all about the outside of the element; second, the supported attribute values are almost identical, for example, Outline-style and border-style values dotted, dashed, solid, ... And so on, some of the grammar is almost the same. If this is not a close relative, you let the absolute position and float what to say.

2. ie8+ Support

Outline is strictly a CSS3 attribute, but ie8+ browsers support it. Plug in a sentence, ie9+ browser outline also support invert, specifically for Outline-color. So if your project doesn't need to be ie6/ie7 browser, you can put outline in your heart and sometimes you might help.

3. Do not occupy space

The default box model, assuming the element 100*100 pixel, we set the element border:10px solid, then the actual size of the element is 120*120 pixel, the offset of the elements, layout ah what, you need to ponder. However, outline is not the same, you even outline:100px solid, the element occupies the size of 100*100 pixels. This behavior is similar to the transform and Box-shadow CSS3 attributes, although the shape is plump, but the real space occupied has no effect. So, when we implement some interactive effects, 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 angle?

Just a connecting link.

　Second, outline angle and fillet

One of the existing effects:

A row of 60*60 pixels of the right angle picture, the selected picture frame 2 pixel with rounded corners highlighted. 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 is expanded, you know, border will increase the size of the elements, so, for our perfect alignment effect, but also need to reposition the selected elements, up and down the margin values need to change. If I lose it, I'm tired of thinking about it!

Like this kind of UI performance, is born is outline to do thing. So, we waved a big hand:

CSS code copy content to clipboard

outline:2px solid #26C2A7;

Where is the highlighted border? Here it is!

But, not rounded corners!

Dear friend, do not attempt to change the rounded corners of outline through Border-radius, you know, outline and border are close relatives, wearing a pants grew up. But, daughter-in-law can not share ha!border-radius and border is registered bright husband and wife, see, even surname all with the husband, people only recognize border, you outline no, find their daughter-in-law to quench their thirst.

However, outline seems to be a single dog, no daughter-in-law Ah, is outline doomed life right angle, break not bend?

　Third, outline effect of the fillet

The vast CSS sea, at first glance, looks like there is nothing to let outline rounded corners of things. Pay attention to the wording, "seemingly", if we have a pair of sharp eyes, or we will find somewhere hidden can let outline rounded corners of things.

In the Firefox browser, there is a round-corner couple Outline-radius with outline,

The relationship is the same as border and Border-radius.

Because it is still only a private property of the Firefox browser, the current use requires the addition of-moz-prefix, which is-moz-outline-radius.

It's better to be famous than to meet, if Firefox, you can ruthlessly click here: Firefox under outline radius fillet effect Demo

　The effect is as follows screenshot:

The relevant CSS code is as follows:

CSS code copy content to clipboard

IMG {

outline:30px solid #cd0000;

-moz-outline-radius:30px;

}

Is it very loose ah! If you observe carefully enough, you will find that there is a difference between Outline-radius and Border-radius? See, what's the difference? Ah, yes, you're all wrong! There is no difference, outline-radius rules, grammar and so on are the same as Border-radius.

The only difference, that is, compatibility issues, not to see, is to try out. To tell you an unfortunate news, at present, in addition to Firefox browser support Outline-radius, other browsers are empty big fart!

If it is only Webkit/blink browser support Fortunately, at least the mobile end can also use, made a only Firefox support, playing yarn ah! No, even the yarn is not playing!

Kiss, don't despair, an embarrassment, this way in ...

Four, Box-shadow simulation outline fillet effect

Outline-radius Although not, but we can use other properties, can achieve a similar effect, for example, graphics to build one of the great God's Box-shadow.

We usually use Box-shadow is the top 3 parameters, horizontal/vertical offset and fuzzy size, there may be some small partners do not know its 4th optional parameter value What is the use? Box-shadow 4th parameter value, the name expands, can enlarge the projection range, of course, The enlarged area is the solid color area. We can take advantage of this feature, the simulation implementation does not affect the element occupies the size of the outline solid border effect!

Instance first, you can ruthlessly click here: CSS3 box-shadow Analog Outline radius fillet demo

The CSS code is as follows:

CSS code copy content to clipboard

IMG {

border-radius:1px;

box-shadow:0 0 0 30px #cd0000;

}

CSS3 use a lot of small partners should know, Box-shadow projection shape and Border-radius, that is, Border-radius is rounded, Box-shadow projection is also circular arc. So the final effect here is as shown in the following illustration:

　Here's a quick explanation of the meaning of the next two lines of CSS code:

The border-radius:1px indicates a rounded corner size of 1 pixels. Some students may be strange, how is 1 pixels ah, the screenshot is clearly good dozens of pixels, the following just explain;

box-shadow:0 0 0 30px #cd0000出现了4个数值, is horizontal offset 0, vertical offset 0, blur 0 (solid color), expansion size of 30 pixels. As we can imagine, the light shines directly above the box, because there is no drift, no blur, and we don't see any shadows. In fact, the box's shadow is exactly the size of the box (take 1 pixel fillet), at this point, the expansion of 30 pixels, we can brain repair, 1 pixel fillet shadow and then expand 30 pixels. Yo, is not what we need effect, is not the effect of screenshot display!

Know Border-radius 1 pixels around it, the expansion of 30 pixels, the fillet is 30 pixel size.

However, although the naked eye does not see, the above method is actually flawed, because the picture is not a pure right angle, has 1 pixel rounded corners. If you want to achieve the perfect Neffang the effect of the outer circle, you can set a layer of labels, outside the label using Border-radius and Box-shadow on it.