Several ideas for adding borders to elements ., How to add borders

Several ideas for adding borders to elements ., How to add borders

~~~~~~~ Siliu liquor from mountainlow requires a wine dispenser ~~~~~~~

Sometimes we need to add a border for the element. For example, when the mouse hover is used to add a nice border to the element, the layout must not be affected by the original position.

IdeasI

Preset borders for the element. The color is the same as that of the element, and the size is the same as that of the hover. You only need to set the color of the hover element.

Advantage: There is no compatibility problem.

 

IdeasII

Set position: relative for the element, add an extra hidden border, and show the hidden border when the mouse hover.

HTML Element

<Ul class = "parent">

<Li> <div class = "bd"> </div> </li>

<Li> <div class = "bd"> </div> </li>

</Ul>

CSS style

. Parent {width: 500px; background: #000; overflow: hidden ;}

. Parent li {position: relative; width: 200px; background: red; border: 2px solid #000; margin-right: 2px; height: 200px; float: left ;}

. Parent li. bd {display: none; left: 0; top: 0; width: 198px; height: 198px; border: 2px solid yellow ;}. parent li: hover. bd {display: block ;}

Advantage: There is no compatibility problem.

 

Ideas3.

Use the box-sizing attribute to set the container to the weird mode. In this case, the container model width is border + padding + inner width.

Key code

. Parent li: hover {box-sizing: border-box; border: 2px solid yellow ;}

Compatibility: Good. (Ie8 +, android4.1 +, chrome43 +, and other modern browsers)

 

Thought 4

When the hover element is used, the new H5 attribute box-shadow is used to add the object shadow as the border for the element.

Key code

. Parent li: hover {box-sizing: border-box; box-shadow: inset 2px 2px 0 0 yellow, inset-2px-2px 0 0 yellow ;}

Compatibility: Good. (All modern browsers such as ie9 +, android4.1 +, and chrome43 + are not supported by Opera Mini)