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)
Code <div class="test"> <div&g...
1. Introduction I won’t go into details about apo...
Docker Features 1) Quick to get started It only t...
Table of contents Preface optimization Extract va...
We usually use routing in vue projects, and vue-r...
I. Introduction Docker technology is very popular...
In HTML, colors are represented in two ways. One i...
Table of contents 1. Differences and characterist...
Linux File System Common hard disks are shown in ...
Table of contents introduce Usage scenarios Sourc...
Table of contents 1. Customize the network to rea...
Table of contents 1. Draw a circle 2. Circle move...
Table of contents Preface Prototypal inheritance ...
This article shares the specific code of js canva...
You can use the trigger method. There is no native...