CSS3 box-shadow 阴影应用

在 Web Design 必威体育手机客户端中採用 CSS box-shadow 阴影应用可以让指定的 Html 元素产生阴影效果，让区块在网页中浮现、凸显或者产生立体感在设计中增加深度感，使其在网页中更加突出。使用 CSS box-shadow 制作 DIV 区块阴影效果应用范例。

box-shadow: h-shadow v-shadow blur spread color inset;

CSS3 box-shadow 向区块添加阴影。属性可以是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

h-shadow 水平阴影的位置、用来设置阴影偏移量，允许负值《必需》

v-shadow 垂直阴影的位置、用来设置阴影偏移量，允许负值《必需》

blur 模煳距离、值越大，模煳面积越大《可选》

spread 正值时阴影扩张、负值时阴影收缩，预设为 0 阴影与元素同样大《可选》

color 阴影的颜色《可选》

inset 将外部阴影 outset 改为内部阴影《可选》

https://developer.mozilla.org/zh-TW/docs/Web/CSS/box-shadow

加上文字阴影效果

两层 DIV 区块阴影并加上文字阴影效果，产生文字凹陷使用负值。

HTML

<div class="shadow-inset"><div><b>shadow</b></div></div>

CSS

div.shadow-inset{margin:30px 0;}
/* 区块基本样式 */
div.shadow-inset div{margin:0px 10%;width:80%;height:200px;background-color:#cd5c5c;
border:3px solid #cd5c5c;border-radius:9px;text-align:center;}
/* 区块添加阴影 */
div.shadow-inset div{box-shadow: 0px 0px 12px rgba(0,0,0,0.5),
inset 6px 6px 32px rgba(255,255,255,0.1),
inset 0px 0px 8px rgba(255,255,255,0.5),
inset -5px -5px 12px rgba(0,0,0,0.25);}
/* 文字阴影 */
div.shadow-inset div b{font-family:Roboto,Arial,sans-serif;font-size:72px;
line-height:200px;letter-spacing:-2px;color:#f0f0f0;
text-shadow: -1px -1px 5px rgba(0,0,0,0.35);}

浮雕阴影 Embossed shadow

CSS 的浮雕阴影效果可以让 HTML 元素刻上了凹凸不平的纹理，看起来像是浮出来具有立体感的效果。将元素的表面刻上了凹凸不平的纹理，然后产生的阴影和高光来模拟出立体效果，通常使用 box-sizing:border-box 属性来控制边框的尺寸问题。使用两层区块用来表达阴影，内层呈现高光效果，此时需要带有底色才能衬托出来。早期在不同的浏览器和设备上，情况下可能会出现视觉上的不一致性，但当前主流浏览器都支持，设计时需要进行测试和调整。

HTML

<div class="embossed-shadow">
  <div class="black-shadow">
    <div class="white-emboss">A</div>
  </div>
  <div class="black-shadow">
    <div class="white-emboss">B</div>
  </div>
</div>

CSS

div.embossed-shadow{margin:30px 0px;padding:20px 0px;background-color:#e9ecef;max-width:900px;}
div.embossed-shadow div{margin:30px auto;width:120px;height:120px;
background-color:#e9ecef;border-radius:30%;}
/* 区块阴影及高光效果 */
div.embossed-shadow div.black-shadow{box-shadow: 6px 6px 16px rgba(0,0,0,0.3);}
div.embossed-shadow div.white-emboss{box-shadow: -6px -6px 16px rgba(255,255,255,1);}
/* 文字阴影 */
div.embossed-shadow div div{font-size:48px;text-align:center;
line-height:120px;text-shadow: 2px 2px rgba(255,255,255,0.75);}

使用阴影替代 border 边框

使用 CSS box-shadow 阴影替代 border 边线可以调整阴影的大小、颜色、透明度和位置，来达到想要的效果，使用 CSS box-shadow 来取代传统的边线，让网页边框设计多一种处理方式，主要差异是版面的位置影响。

HTML

<div class="grow"></div>

CSS

div.grow{width:200px;height:100px;background-color:#9acd32;}

制作黄绿色的方块 blur 模煳距离为 0 由扩张、位置来改变方向。与 border 边框主要差异是影响版面位置，边框佔有空间、阴影则忽略空间超出的部份可能不见或穿越，视情况使用。

由下左右扩张

box-shadow:0px 30px 0px 30px #6b8e23;

由中心四面扩张

box-shadow: 0px 0px 0px 30px #6b8e23;

由下扩张

box-shadow: 0px 60px 0px 0px #6b8e23;

由右扩张

box-shadow: 150px 0px 0px 0px #6b8e23;

由左右扩张

box-shadow: 60px 0px 0px #6b8e23, -60px 0px 0px #6b8e23;

由上下扩张

box-shadow: 0px 30px 0px #6b8e23, 0px -30px 0px #6b8e23;

jQuery box-shadow 应用

CSS 的 box-shadow 属性可以用在必威体育手机客户端 HTML 元素周围创建阴影效果，而 jQuery 可以进一步应用这个属性，让生成的元素具有更加丰富的视觉效果。可以通过 jQuery 对按钮添加 hover 或 click 事件来改变阴影的颜色或偏移量，使按钮的应答更加自然，或是弹出式的提示框，使画面更加生动。

$("div.jquery-shadow div").css({
  "box-shadow": n1 + "px " + n1 + "px " + n2 + "px " + n3 + "px rgba(0,0,0,0.5)"
});

box-shadow: 2px 2px 15px 0 rgba(0,0,0,0.5);

CSS border-radius 圆角属性应用

CSS 的 border-radius 属性用于设置元素的边框圆角。使用这个属性可以让元素的边框呈现圆角效果，从而使元素看起来更加柔和和美观。通过将图片元素的 border-radius 属性设置为 50% 或与图片的宽度和高度相等的值，就可以轻松地将图片变成圆形。在设计中使用文本、图像或其他内容添加 border: 1px solid #ccc 边框。圆角同样的可以通过将元素的 border-radius 属性设置为适当的值来实现这个效果。

四个边分开设置的值

border-radius:1px 2px 3px 4px;

圆角效果使用四个边分开设置，顺序为左上、右上、右下、左下这样就可以创造出希望的圆角效果。