Rounded edges inside the border

Background: Box-shadow, Outline, “Multiple Borders”

One or two divs nested

Rounding the inner corners of two divs is easy. All you need is a right Angle to the outer corners.

div First Try

.box{
    	width: 200px;
        padding: 20px;
        background-color: # 655;
    }
.content{
       background-color: tan;
       border-radius:.8em;
       padding: 20px;
   }
Copy the code

This solution is more flexible, and we can set more styles on the box, but it takes two elements to do it.

2. Box-shadow + outline scheme

Remember the difference between outline and box-shadow for rounded corners in the previous article? Box-shadow will fit the rounded corner of the border, but outline will not. When we just need to implement a solid color border with an inner rounded corner, using this scheme can achieve the same effect.

box-shadow + outline First Try

width: 160px;
background: tan;
border-radius:.8em;
padding: 20px;
margin: 20px;
box-shadow: 0px 0px 0px .4em # 655;
outline: 20px solid # 655;
Copy the code

In this scenario,box-shadowIs to fill inoutlineandborderThe gap between, if not addedbox-shadowIt’s going to look something like this.

  1. So we need to set the spread radius of the box-shadow to fill in the gaps between the four similar triangles.

  2. As for the radius of diffusion, we can set it using the Pythagorean theorem.

  3. That is, the distance from the center of the circle to the radius of the border-radius.

  4. 2 () – 1) r; √2 ≈ 1.4 So (√ 2-1) is between 0.4 and 0.5, we can calculate by 0.5. That’s 0.5r.

  5. Outline: -30px; outline: -30px; outline: -30px; Adjust position.

/ * x offset | y offset | | | fuzzy shadow radius shadow diffusion radius of the shadow color * /Copy the code
box-shadow: 2px 2px 2px .4em # 655;
Copy the code

And one would say, why notoutline-offset:-10px;In this waybox-shadow? Just try it.outlineDisplay hierarchy is higherborderHigher, so the rounded corners of the border will be overwritten.

Final case code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            padding: 20px;
            background-color: # 655;
        }
        .content{
            background-color: tan;
            border-radius:.8em;
            padding: 20px;
        }
        .box2 {
            width: 160px;
            background: tan;
            border-radius:.8em;
            padding: 20px;
            margin: 20px;
            box-shadow: 0px 0px 0px .4em # 655;
            outline: 20px solid # 655;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">When the wine song, life geometry.</div>
    </div>
    <hr>
    <hr>
    <hr>
    <div class="box2">When the wine song, life geometry.</div>   
</body>
</html>
Copy the code

Next: CSS Revealed: 5. Stripe Backgrounds (part 1)