4.5.1 色彩设置原理

前面我们使用的 color、background-color 等属性，都是用来指定色彩的属性。但是设置色彩本身，不仅仅只是 16 进制色或者已经给出的颜色命名，还包括可以使用 RGB 和 RGBA 色值。

• RGB设置：color: rgb(255,255,0); 复制软件中rgb参数到小括号内即可
• RGBA设置：color: rgba(255,255,0,0.5); 在rgb后面增加了一个透明度，0.0 是完全透明，1是不透明

4.5.2 边框其它属性

boder 除了我们看到的描边设置外，还可以用来控制元素圆角的大小，虽然字面理解起来它们关联不是太大，但是 CSS3 中提供了 boder-radius 属性定义元素的四个边角，除了它本身外还包含下级：

• border-top-left-radius：左上角
• border-top-right-radius：右上角
• border-bottom-left-radius：左下角
• border-bottom-right-radius：右下角

我们可以通过增加对应的像素数值，来实现圆角矩形的效果，尤其在按钮的实现中。例如：

除了圆角，同属于这个类型的属性中还有一个阴影的属性，那就是 box-shadow 属性。它的设置和 XD 以及 Sketch 的阴影设置是一样的，下方案例分别是阴影的 X轴距、Y轴距离、BLUR模糊值、色彩：

4.5.3 元素透明度设置

CSS 中提供了一个 Opacity 属性专门用来控制元素的透明度，透明度的值和 RGBA 的使用方法一致，并且，这个透明度会影响下级元素，相当于我们为 Sketch 中制作的编组设置了透明度。

4.5.4 盒子属性

在页面的展示中，经常要实现一个遮罩的效果，那么我们就会用到 overflow 盒子属性，这个属性主要用来对标签内的元素状态做应对，比如下面这些设置：

• hidden：元素内容超出标签盒子大小，那么就被隐藏（裁切）
• scroll：为这个标签盒子提供内部滚动条的机制
• auto：如果内容超出标签盒子的大小，那么自动增加内部的滚动条

4.5.5 长宽的具体设置

之前的演示我们应该都知道了，元素尺寸中宽和高的具体设置属性是 width 和 heigh，但是这两个属性的设置除了使用数值外，同时还可以设置百分比，比如：

这样子，这个 div 的宽就是整个浏览器视图区域的 50% 宽，我们变更浏览器宽度的时候，它的宽也会一起变更。也就是说，百分比设置，是根据它的上层标签宽来决定的，50%的宽即上级标签实际尺寸宽度的一半。

除了百分比外，宽和高都提供了一个最小和最大值的设定，即 min-width、max-width、min-height、max-height，它可以限定标签的长宽在一个特定的范围中。

比如上方的设置中，就是基于浏览器视图50%的情况下，最大的尺寸只到 300px，就不会再超出了。min和max两个设置也是自适应中的重要环节。