In the past, when I needed the border length to be smaller than the container, I used div nesting. Later I found that pseudo-classes are very convenient for achieving this effect. Only one div is enough, and adjusting padding and margin is not troublesome. <div class="content-block"> <div class="box-container"> <div class="border-top">border top</div> </div> <div class="box-container"> <div class="border-left">border left</div> </div> <div class="box-container"> <div class="border-right">border right</div> </div> <div class="box-container"> <div class="border-bottom">border bottom</div> </div> </div> .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; } The effect is as follows: Summarize The above is the implementation of the CSS border length control function introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Design Reference Beautiful and Original Blog Design
>>: Flash embedded in HTML Solution for embedding Flash files in HTML web page code (Part 1)
Today we are going to implement a Thunder Fighter...
Optimization ideas There are two main optimizatio...
History of ZFS The Z File System (ZFS) was develo...
Big data continues to heat up, and if you are not...
Demand Background Recently, I plan to use Vue and...
Pop-up windows are often used in actual developme...
Custom tags can be used freely in XML files and HT...
calc is a function in CSS that is used to calcula...
Table of contents 1. Setup 1. The first parameter...
Table of contents Chain calls A small case Chain ...
1. Introduction to MMM: MMM stands for Multi-Mast...
Asynchronous replication MySQL replication is asy...
This article shares the specific code for JavaScr...
This article example shares the specific code for...
This article mainly introduces the process analys...