边框，body的背景会从它的半透明边框透上来。"/>
CSS篇：给一个容器设置一层白色背景和一道半透明白色边框，body的背景会从它的半透明边框透上来。
例如：给一个容器设置一层白色背景和一道半透明白色边框，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;
更多推荐
CSS篇：给一个容器设置一层白色背景和一道半透明白色边框,body的背景会从它的半透明边框透上来。
发布评论