介绍 css3阴影 box-shadow用法总结

box-shadow:<length><length><length><length>|| <color>
<length><length><length>?<length>? || <color>:

阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影边框;阴影模糊值;阴影颜色

CSS3盒阴影效果不仅支持盒外阴影,还支持内阴影,使用时增加一个inset属性即可。例如:box-shadow: inset 0 0 1px #fff;所表示的含义是没有偏移,1像素模糊的白色内阴影。

dbb44aed2e738bd40f96d2e5a18b87d6267ff9ab.jpg.png

box- shadow还支持多阴影,例 如:

box-shadow: inset 0 0 1px #fff, inset 4px 4px 20px rgba(255,255,255,0.33), inset -2px -2px 10px rgba(255,255,255,0.25);

所表示的 含义是,无偏移1像素模糊白色阴影重叠于左上角4像素偏移20像素模糊透明度0.33的白色内阴影再重叠于右下角偏移2像素,模糊10像素,透明度 0.25的白色内阴影。

dc54564e9258d109e3b9c966d158ccbf6d814d8f.jpg.png

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

8b82b9014a90f603c31ffc933912b31bb151edb3.jpg

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

4034970a304e251ff752842ca786c9177e3e53b8.jpg

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

024f78f0f736afc3dad15fb1b319ebc4b6451200.jpg

-webkit-border-radius: 40px; 
 -webkit-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000;
 -moz-border-radius: 40px;
 -moz-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px
 #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset
 0 22px 5px #0773b4, inset 0 -5px 10px #0df;
 height: 34px; 
width: 80px; 
 border-radius: 40px; 
 background: #034a76; 
 box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px 
#fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0
 22px 5px #0773b4, inset 0 -5px 10px #0df;

8644ebf81a4c510f211682ce6059252dd52aa510.jpg

原文链接:HelloWeb前端网 » 介绍 css3阴影 box-shadow用法总结 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享