WEB前端

div阴影效果(多种css div阴影效果)

位置:首页 > WEB前端 > css教程,2017-04-29
div阴影效果(多种css div阴影效果)5种div阴影效果,本次css div阴影效果兼容常见浏览器

css div阴影效果兼容浏览器

div阴影效果(图1)

效果一:

.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;
}


TAGS:div阴影效果

猜你喜欢


NewHot