在前端开发中，设计师们经常会用到阴影和圆角来优化界面的外观效果。随着移动设备的普及，响应式设计逐渐成为主流，因此在编写响应式界面时，如何灵活地设置阴影和圆角就显得尤为重要。
阴影设置技巧
CSS 3引入了box-shadow属性，它可以在 HTML 元素周围添加一个阴影效果。我们可以使用以下代码实现一个简单的阴影效果：
box-shadow: 0 0 10px rgba(0,0,0,.3);
代码解释：
- 第一项“0”表示阴影横向偏移量，这里设置为0，表示阴影直接在元素上覆盖。
- 第二项“0”表示阴影纵向偏移量，也设置为0，表示阴影直接在元素上覆盖。
- 第三项“10px”表示阴影的模糊半径，也就是阴影的晕染程度。
- 第四项“rgba(0,0,0,.3)”表示阴影的颜色和透明度。
除了上述属性之外，我们可以通过设置inset来实现内部阴影效果，或者同时设置多个阴影，实现更复杂的效果。
/* inset设置内部阴影效果 */ box-shadow: inset 0 0 10px rgba(0,0,0,.3); /* 设置多项阴影效果 */ box-shadow: 0 0 10px rgba(0,0,0,.3), 0 0 20px rgba(0,0,0,.2);
圆角设置技巧
在移动设备上，圆角效果可以使界面更加友好，而在某些情境下，圆角效果也会成为设计师考量的重点。CSS3中引入了border-radius属性，通过它我们可以实现圆角效果，下面是代码示例：
/* 圆角设置 */ border-radius: 10px;
代码解释：
- 代码中的“10px”表示圆角半径，通过调整数值我们可以设置不同大小的圆角。
同样地，border-radius也支持垂直方向和水平方向分别设置圆角：
/* 上左、上右、下右、下左分别设置圆角 */ border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 40px;
边界半径还支持指定在某些情况下应该应用圆角效果：
/* 指定左上和右下的角应该使用圆角 */ border-radius: 10px 0 0 10px;
最后，我们也可以通过这些属性之间的组合来实现更复杂的效果。下面是一些例子：
/* 椭圆 */ border-radius: 50%; /* 不规则形状 */ border-radius: 10px / 30px; /* 菱形形状 */ border-radius: 40px 70px 40px 70px / 70px 40px 70px 40px;
以上是响应式设计中阴影和圆角设置的一些技巧，相信这些技巧对于前端工程师和 UI 设计师们能够提供一些参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b6c774306f20b3a6308bc6
