How to implement border length control function in css-CSS Tutorial-php.cn

How to implement border length control function in css

In the past, when the border length needed to be smaller than the container, I used div nesting. Later, I found that pseudo-classes are very convenient to achieve this effect. Only one div is enough, and adjusting padding and margin is not very troublesome.

(Recommended tutorial:CSS Getting Started Tutorial)

  border top
 
  border left
 
  border right
 
  border bottom

Copy after login

.box-container { position: relative; width: 90%; color: #777; } .border-top { background: #b4bcbf; padding: 15px; } .border-top:before { content: ''; position: absolute; left: 42%; top: 0; bottom: auto; right: auto; height: 7px; width: 50%; background-color: #8796a9; } .border-left { background: #dfdad6; padding: 15px; } .border-left:before { content: ''; position: absolute; left: 0; top: 6%; bottom: auto; right: auto; height: 52%; width: 5px; background-color: #a89d9e; } .border-right { background: #eee9c4; padding: 15px; } .border-right:after { content: ''; position: absolute; left: auto; top: auto; bottom: 5px; right: 0; height: 52%; width: 5px; background-color: #f39c81; } .border-bottom { background: #bcdc9d; padding: 15px; } .border-bottom:after { content: ''; position: absolute; left: 18px; top: auto; bottom: 0; right: auto; height: 6px; width: 105px; background-color: #32b66b; }

Copy after login

The effect is as shown below:

How to implement border length control function in css

Related Video tutorial recommendation:css video tutorial

The above is the detailed content of How to implement border length control function in css. For more information, please follow other related articles on the PHP Chinese website!