Outline and box shadow to achieve the highlight effect of contour fillet

outline The properties and border Very similar , It can achieve the effect of element highlight or external outline transparency , But there is no fillet effect , have access to box-shadow simulation outline The fillet effect of

outline Definition and Usage

outline （ outline ） Is a line drawn around an element , On the edge of the border , Can play a role in highlighting elements .

notes ： Contours don't take up space , It doesn't have to be rectangular .

outline Shorthand property sets all profile properties in a declaration .

You can set the following properties in order ：

• outline-color
• outline-style
• outline-width

 

box-shadow Definition and Usage

box-shadow Property to add one or more shadows to the box

grammar

box-shadow: h-shadow v-shadow blur spread color inset;

notes ：box-shadow Add one or more shadows to the box . This property is a comma separated list of shadows , Every shadow is made by 2-4 Length value 、 Optional color values and optional inset Key words to define . The value of the omitted length is 0 

value	describe
h-shadow	It's necessary . The position of the horizontal shadow . Allow negative values .
v-shadow	It's necessary . The position of the vertical shadow . Allow negative values .
blur	Optional . A fuzzy distance .
spread	Optional . Size of shadow .
color	Optional . Color of shadow . see also CSS Color value .
inset	Optional . Add external shadow (outset) Change to internal shadow .

 box-shadow simulation outline The fillet effect of

It is good to achieve the transparent effect or highlight effect of the outer contour

outline effect

 .outline {
            outline: solid 10px rgba(34, 139, 34, 0.5);
        }

box-shadow effect

 .box-shadow {
            box-shadow: 0 0 0 10px rgba(245, 0, 0, 0.5);
        }