例如：给一个容器设置一层白色背景和一道半透明白色边框，body的背景会从它的半透明边框透上来。
效果如图： 第一步，将网页背景颜色设置为红色，绘制一个矩形，并设置边框的颜色为半透明白色边框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<div class="board"> <title>Document</title> </head> <body style="background: red;"> <div class='div'></div> </body> <style> .div{ width:300px; height:200px; background: white; border: 10px solid hsla(0,0%,100%,.5) } </style>这时我们看到的效果如下图所示： 显示结果令人疑惑：边框哪去了？ 尽管我们看不到边框，但是边框是真实存在的，只是在上面的例子中，我们所做的事情并没有让body的背景从半透明白色边框处透上来，而是在在半透明白色边框处透出了这个容器自己的纯白实色背景，实际上得到的效果跟纯白实色的边框看起来完全一样。 解决方案 通过 background-clip 属性来调整上述默认行为所带来的不便。 知识点：background-clip
定义和用法： 设置元素的背景是否在其边框框、填充框或内容框下扩展如果元素没有背景-图像或背景-颜色，这个属性只有在边界有透明区域或部分不透明区域(由于边界-样式或边界-图像)时才会有视觉效果;否则，边框将掩盖差异。 语法：background-clip: border-box|padding-box|content-box|initial|inherit;属性值： border-box：背景延伸到边界的外侧padding-box：背景延伸到边界的内边缘content-box：背景延伸到内容框的边缘initial：将此属性设置为其默认值。inherit：从其父元素继承此属性。.修改代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<div class="board"> <title>Document</title> </head> <body style="background: red;"> <div class='div'></div> </body> <style> .div{ width:300px; height:200px; background: white; border: 10px solid hsla(0,0%,100%,.5); background-clip:padding-box; } </style>显示效果：
RGBA和HSLA
CSS支持140种颜色名称，HEX值，RGB值、RGBA值，HSL值，HSLA值和不透明度。
RGBA颜色
RGBA颜色值是具有alpha通道的RGB颜色值的扩展-它指定了颜色的不透明度。RGBA颜色值指定为：rgba（红色，绿色，蓝色，alpha）。alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。HSL颜色
HSL代表色相，饱和度和亮度。HSL颜色值指定为：hsl（色相，饱和度，亮度）。色相是色轮上的度（从0到360）： 0（或360）为红色120是绿色240是蓝色 饱和度是一个百分比值：100％是全色。亮度也是一个百分比；0％是深色（黑色），而100％是白色。HSLA颜色
HSLA颜色值是带有Alpha通道的HSL颜色值的扩展-它指定了颜色的不透明度。HSLA颜色值由以下参数指定：hsla（色相，饱和度，明度，alpha）alpha参数定义不透明度。alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。不透明度
CSS opacity属性设置整个元素的不透明度（背景颜色和文本都是不透明/透明的）该opacity属性值必须是介于0.0（完全透明）和1.0（完全不透明）之间的数字。例如：background-color:rgb(255,0,0);opacity:0.6;