CSS3 how to achieve the outline effect of fillet?

First of all, outline is a very good thing.

Wen Xin, in 10, wrote a usability article: "Page usability of the outline outline of some research", but also very useful; 3 years later, 13, introduced a useless thing: " Pure CSS Implementation of outline toggle transition animation effect ".

A few weeks ago, Weibo threw a question:

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

Sure enough to master in the civil, the results @ the Earth Dudy cleverly use outline to achieve the effect of the cross Chrome browser. Demo See here.

————— – I'm a low-key divider, and no one can see me —————

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

1. Border close relatives
outlineand border A close relative, why do you say that? First, it's all about the outside of the element; second, the supported attribute values are almost the same, for example, and values,,, and so outline-style border-style dotted dashed solid ... on, and some syntax is almost the same. If this is not a close relative, you let the absolute position and float what to say.

2. ie8+ Support
outlinestrictly speaking, it belongs to the CSS3 attribute, but the ie8+ browser supports it. Plug-in one, ie9+ browser outline also support invert , specifically for outline-color . So, if your project doesn't have to be in the Ie6/ie7 browser, you can put it outline in your heart and sometimes it 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 at least 120*120 pixel, the elements of the offset, layout ah what, it takes a lot of thinking. But, outline is different, you even outline:100px solid , the element occupies the size or 100*100 pixel. This behavior, transform as well as the box-shadow CSS3 attributes are very similar, although the shape is plump, but, the occupied real space has no effect. So, when we implement some interaction effects, such as hover change, we can focus on the effect itself, without being swayed by the layout, which is a great experience.

4. Right Angle! Rounded corners?
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 the 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, the value of the top and bottom margin 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:

outline:2px solid #26C2A7;
 
 
Where is the highlighted border? Here in here!
 
 
But, not rounded corners!
 
Dear friends, do not attempt border-radius to change outline the rounded corners, you know, with the next of outline border Kin, wearing a pants grew up. But, daughter-in-law can not share ha! border-radiusand border is the registered bright husband and wife, see, even surname are with the husband, people only recognize border , you have no outline way, find their daughter-in-law to quench their thirst.
 
But, outline seemingly is a single dog, no daughter-in-law Ah, is outline doomed to a lifetime right angle, break not bend?
 
Third, outline effect of the fillet
 
The vast CSS sea, at first glance, there seems to be nothing to make outline the 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 outline pair of round-corner couples outline-radius ,
 
The relationship is the border same as border-radius the relationship.
 
Because it is still just a private property of the Firefox browser, the current use requires a -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:
 
IMG {
    outline:30px solid #cd0000;	
    -moz-outline-radius:30px;
}
 
is not very loose ah! If you observe carefully enough, you will find outline-radius that border-radius there is a difference. See, what's the difference? A prize for the right answer ... Ah, yes, you all answered wrong! There is no difference, outline-radius the rules of the rounded corners, the syntax and so border-radius on are the same.
 
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 mere Firefox support, playing yarn Ah! No, not even a yarn!
 
Kiss, don't despair, an embarrassment, this way in ...
 
Four, Box-shadow simulation outline fillet effect
 
outline-radiusAlthough it's gone, we can use other properties to achieve similar effects, like, for example, the graphic construction of one of the great gods box-shadow .
 
We usually use box-shadow 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? The box-shadow 4th parameter value, the name expands, may enlarge the projection scope, certainly, the enlarged area is the solid color area. We can take advantage of this feature, the simulation implementation does not affect the element to occupy the size of the outline solid color border effect!
 
Instance first, you can ruthlessly 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 use of a lot of small partners should know that box-shadow the projection shape and the same border-radius , that is, border-radius rounded, box-shadow the 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:
 

   

 
    
 
     
border-radius: 1pxIndicates 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 #cd0000There are 4 numeric values, horizontal offset 0, vertical offset 0, blur 0 (solid color), and size 30 pixel expansion. 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 about 1 pixels, 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 to use border-radius and box-shadow on it.