How does small tip:css3 achieve the outline effect of rounded corners?

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=4765

First of all, outline is a very good thing.

Wen Xin, 10 time wrote an article on Usability: "Page usability of the outline outline outlines of some research", it is very useful; 3 years later, 13, introduced a useless thing: " Pure CSS Implementation of outline toggle transition animation effect ".

A few weeks ago, a question was thrown on Weibo:

Is there any way to use CSS and using a layer of tags to achieve the following plus effect, "can not use:: Before,:: After pseudo-element implementation" "Box-shadow effect is not good, I tried, small size ie will paste edge, compatible with ie9+ browser. I have no idea, but master in the folk!

Sure as a master in the folk, the result @ Earth Dudy Clever use of outline to achieve the Chrome browser cross effect. Demo See here.

————— – I'm a low-key divider, and everyone can't see me —————

outlineA lot of knowledge, extension can write a long, here is a brief introduction to something.

1. Border close relatives
outlineAnd border a close relative, why do you say that? First, the elements are set outside the box, and second, the supported property values are almost the same, for example, outline-style and border-style values,, and so dotted dashed solid ... on, some of the syntax is almost the same. If this is not a close relative, you let the absolute positioning and floating what is right.

2. ie8+ Support
outlineStrictly speaking, it belongs to the CSS3 attribute, but the ie8+ browser supports it. Plug a sentence, ie9+ browser is outline also supported invert , specifically targeted outline-color . So if your project doesn't have a Ie6/ie7 browser, you can outline hang it in your heart and sometimes help.

3. Do not occupy space
The default box model, assuming that element 100*100 pixels, we set the element border:10px solid , then the actual element occupies the size of at least 120*120 pixels, elements of the offset, 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 transform is similar to and box-shadow equal to the CSS3 attribute, although the shape is plump, but the actual space occupied has no effect. So, when we implement some interaction, such as hover change, we can focus on the effect itself, rather than being left to the layout, which is a great experience.

4. Right Angle! Rounded corners?
Just a connecting link.

Second, the right angle of outline and fillet

One of the existing effects:

A row of 60*60 pixels of right-angled picture, selected picture frame 2 pixels 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 outside the effect is expanded, you know, border will increase the size of the element, so, for our perfect alignment effect, but also need to do a relocation of the selected elements, the value of the upper and lower left and right margin need to change. If I lose, I'll be bored to think!

Like this UI performance, it's natural to be outline to do things. So, we waved a big hand:

outline:2px solid #26C2A7;

Where is the highlighted border? Here in here!

But, not a fillet!

Dear friends, do not attempt border-radius to change outline the rounded corners, to know, with a close outline border relative, wearing a diaper grew up. But, daughter-in-law can not share ha! border-radiusand border is the registered bright couple, see, even the surname is with the husband, others only recognize border , you do not outline , find their daughter-in-law to quench thirst.

But, outline seems to be a single dog, no daughter-in-law, is outline doomed to a lifetime right angle, not bent?

Three, the outline effect of the fillet

The vast CSS of the sea, at first glance, it seems that there is no outline corner of the things to let. Pay attention to the wording, "looks like", if we have double sharp eyes, still will find somewhere to hide can let outline fillet of things.

In the Firefox browser, there is a outline pair of rounded corner couples outline-radius ,

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

Because this is still only the Firefox browser private properties, so the current use needs to -moz- prefix, that is,-moz-outline-radius.

Well-known as a meeting, if Firefox, you can mercilessly click here: Firefox under outline radius round effect Demo

The effect is as follows:

The relevant CSS code is as follows:

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

is not very loose ah! If you observe carefully enough, you will find, outline-radius and border-radius still have a difference? See, what's the difference? Correct the prize ... Ha, yes, you have all answered the wrong question! There is no difference between outline-radius the fillet rules, the syntax and the like border-radius .

The only difference, that is, the compatibility problem, is not to see, is to try out. Tell everyone a sad news, currently, in addition to Firefox browser support outline-radius , other browsers are empty big fart!

If it is only Webkit/blink browser support Fortunately said, at least mobile can also use, made a just Firefox support, play yarn Ah! No, even the yarn is out of play!

Kiss, don't despair, be okay, this way in ...

Four, Box-shadow simulation outline fillet effect

outline-radiusIt's not possible, but we can use other properties to achieve similar effects, for example, to build one of the great gods box-shadow .

We usually use box-shadow the most of the previous 3 parameters, horizontal/vertical offset and fuzzy size, there may be some small partners do not know what the 4th optional parameter value is the use of it? The box-shadow 4th parameter value, outside the extension, can extend the projection range, of course, the enlarged area is a solid color region. We can use this feature to simulate a outline real-color border effect that does not affect the size of the element.

Example First, you can click here: CSS3 box-shadow Analog Outline radius fillet demo

The CSS code is as follows:

img {    border-radius:1px;    box-shadow:0 0 0 30px #cd0000;}

CSS3 with a lot of small partners should know that box-shadow the projection shape and border-radius same strain, that border-radius is rounded, box-shadow the projection is also circular arc. So the end result here is as follows:

Here's a brief explanation of what the next two lines of CSS code mean:

1. border-radius: 1pxRepresents a fillet size of 1 pixels. Some classmates may be strange, how is 1 pixels ah, the fillet is clearly good dozens of pixels, below just explain;
2. box-shadow: 0 0 0 30px #cd0000There are 4 values, namely horizontal offset 0, vertical offset 0, blur 0 (solid color), and expansion size 30 pixels. As we can imagine, the light shines directly from the top of the box, because there is no offset, no blur, and we don't see any shadows. In fact, the shadow of the box is just the size of the box (take a 1 pixel fillet), and at this point, expand 30 pixels, we can fill the brain, 1 pixel rounded shadow and then expand 30 pixels. Yo, is not the effect we need, is not the effect of the show!

   border-radiusyou know, about 1 pixels, and after 30 pixels, the rounded corners are 30 pixels in size.

However, although it is not visible to the naked eye, the above method is actually flawed, because the picture is not a pure right angle, there are 1 pixels of rounded corners. If you want to achieve the perfect uchikata Outer circle effect, you can set a layer of labels, the outside of the label to use border-radius and box-shadow on it.

How does small tip:css3 achieve the outline effect of rounded corners?