CSSの影とラウンドについて

CSSで 影とラウンドを表現してみます。

影

.drop-shadow.top {
    box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4);
}

.drop-shadow.right {
    box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
}

.drop-shadow.bottom {
    box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
}

.drop-shadow.left {
    box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4);
}

エンファサイズ

.emphasize-dark {
    box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}
    
.emphasize-light {
    box-shadow: 0 0 0 10px rgba(255,255,255,.25);
}
    
.emphasize-inset {
    box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5);
}
    
.emphasize-border {
    box-shadow: inset 0 0 0 7px rgba(255,255,255,.5);
}

エンボス

.embossed-light {
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
    
.embossed-heavy {
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 
        inset 0 2px 3px rgba(255,255,255,0.3),
        inset 0 -2px 3px rgba(0,0,0,0.3),
        0 1px 1px rgba(255,255,255,0.9);
}

グラデーション

.gradient-light-linear {
    background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
}
    
.gradient-dark-linear {
    background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
}
    
.gradient-light-radial {
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
}
    
.gradient-dark-radial {
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
}

ラウンド・ボーダー

.light-rounded {
    border-radius: 3px;
}
    
.heavy-rounded {
    border-radius: 8px;
}
    
.full-rounded {
    border-radius: 50%;
}
    
.barrel-rounded {
    border-radius: 20px/60px;
}