MENU


Radius, Shadow and Wrapping

border[-bottom-left|-bottom-right|top-left|top-right]-radius
:50px: rounds off the corner with a radius of 50px.
:50% 20px: rounds off the corner of the element with an eclipse with the radii 50%(width) and 20px(height).

box-shadow (1 to 6 values)
: none: renders no shadow.
: 60px -16px teal: x-offset, y-offset, color.
:10px 20px 30px black: external overlapped shadow that is 10px to the right, 20px to the bottom, 30px blur, and black in colour.
:10px 20px 30px 40px black inset: overlapping shadow that is 10px to the right, 20px to the bottom, 30px blur, 40px in spread, and black in colour.


RESETRUNFULL
<!DOCTYPE html><html><head>
   <style type="text/css">
   div {
      box-shadow: 10px 10px 30px inset;
      width: 70px;
      height: 70px;
      background : lightgreen;
   }
   button {
      box-shadow: 10px 10px 30px;
      border-radius: 30px;
   }
   </style></head><body>
      <div></div>
      <button>Click Me</button>
  </body>
</html>
This elegantly highlights a portion of an image, dimming out the rest of the document, ie. a spotlight effect / a hole punched through an overlay layer.
RESETRUNFULL
<!DOCTYPE html><html>
   <head>
      <title>This is Albert Einstein</title>
      <style>
         div{    
            position: absolute;    
            margin: -250px 195px;    
            width: 100px;    
            height: 200px;    
            border-radius: 50px;    
            border: red 5px solid;        
            box-shadow: 0 0 999vh 999vh rgba(0,0,0,0.9);
         }
      </style>
   </head><body>    
      <img src="/shared/einstein.jpeg"/>
      <div></div>
   </body>
</html>

box-decoration-break
:clone: at a page break, column break, or line break, box fragments are individually wrapped. The border, padding, border image, radius, shadow and background are redrawn at each box fragment.
:slice: at a page break, column break, or line break, box fragments are sliced. No border, padding, border image, radius, shadow, and background is redrawn at the adjoining edges.

Two shadows are dropped from each .
RESETRUNFULL
<!DOCTYPE html><html><head>
   <style>
      span{
         box-shadow:5px 5px 5px 5px teal, 
                   -5px -5px 5px 5px gold;    
         border-radius: 9px;    
         line-height: 50px;
      }
      span:first-child{    
         box-decoration-break: clone;    
         -webkit-box-decoration-break: clone;
      }
      span:last-child{    
         box-decoration-break: slice;    
         -webkit-box-decoration-break: slice;
      }
   </style>
</head><body>    
   <span> You can do ice-breaking <br/> by being cool. </span><br/><br/>    
   <span> You can do ice-breaking <br/> by being cool. </span>
</body></html>