Home > Article > Web Front-end > css3 simulates rounded corners outline_html/css_WEB-ITnose
css3 simulates rounded corners outline_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:471159browse
I saw an article on the Internet today about simulating rounded corners by the great master Zhang Xinxu. I thought it was very powerful, magical, and misleading, so I quickly recorded it for everyone to share and learn from!
One characteristic of outline is that it does not occupy space. This is a very powerful attribute, but most outlines are square, so how can we achieve a gorgeous rounded outline effect? We all know that there is a border-radius attribute in CSS3 that can set rounded corners, but if combined with border and border-radius, it will increase the size of the box!
At this time we need to use a combination of box-shadow and border-radius to simulate the outline effect of rounded corners! Without further ado, let’s start with the code:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 div{margin:0;padding:0;} 6 div.outlineRadius{width:250px;height:250px;line-height:250px;text-align:center;} 7 .outlineRadius{border-radius:1px;box-shadow:0 0 0 25px #00438a;} 8 </style> 9 </head>10 <body>11 <div class="outlineRadius">圆角的outline效果盒子</div> 12 </body>13 </html>
The running effect is as follows:
You can check the size of this box in Chrome’s debugging tool or height: 250px;
Why can this effect be achieved? Because the box has 1px rounded corners, and the horizontal shadow of the box is 0, the vertical shadow is 0, and the shadow blur distance is 0, imagine that the box actually looks like there is no shadow, because the shadow of the box is exactly the size of the box. However, the fourth parameter is the size of the shadow according to the official interpretation of w3c, so the fourth
parameter expands the shadow of the box, and because the box has 1px rounded corners, it achieves the effect of simulating a rounded outline. ! Isn’t it great!