Home > Developer > JavaScript
Without using border-radius, You can implement a reusable rounded rectangle with adaptive height and width, and a border-radius rounded corner.
Currently, css3 supports rounded rectangle, but it is difficult to solve compatibility issues, but it is necessary to understand the following methods.
In a div, it contains eight divs and controls the height, margin, and border attribute values of the eight divs to achieve the rounded rectangle effect. However, pay attention to the sequence of Divs.
Html code:
<Body> <div class = "bor"> <div class = "b1"> </div> <div class = "b2"> </div> <div class =" b3 "> </div> <div class =" b4 "> </div> <div class =" mid "> <p> do not use border-radius achieve a reusable rounded rectangle with adaptive height and width </p> </div> <div class = "bor"> <div class = "b4"> </div> <div class = "b3"> </div> <div class = "b2"> </div> <div class = "b1"> </div> </div> </body>
Css code:
.bor div { height: 1px; } .b1 { margin: 0 3px; background-color: black; } .b2, .b3, .b4, .mid { border-left: 1px solid black; border-right: 1px solid black; } .b2 { margin: 0 2px; } .b3 { margin: 0 1px; } .b4 { margin: 0 1px; }.mid p { margin: 0; padding:0 10px; font-size: 12px; line-height: 24px; white-space: pre-wrap;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
