css之半透明边框

最新推荐文章于 2024-09-14 14:24:30 发布

weixin_34013044

最新推荐文章于 2024-09-14 14:24:30 发布

阅读量221

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cf9bfe1e51d45773f2e8f19

半透明边框

CSS 中颜色的取值：

#xxxxxx
colorName
rgb()
rgba()
hsl()
hsla()

rgba()与rgb()：rgb()代表red, green, blue。 rgba()是rgb()的扩展，带有一个 alpha 通道, 这个值规定了元素的不透明度。r,g,b的取值均为0~255，a的取值为0~1

hsla()与hsl()：hsl(): hue色相, saturation饱和度, lightness亮度 hsla()是hsl的扩展, 带有一个 alpha 通道, 这个值规定了元素的不透明度. h的取值0~360, 0/360：red，120：green，240：blue；s和l的取值均为0.0%~100.0%，a的取值为0~1

实现半透明边框的效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css learning</title>
  <style>
    .container {
      background: darkorange;
    }
    .container span{
      border: 10px solid hsla(0, 0%, 100%, 0.5);
      display: inline-block;
      background: white;
      background-clip: padding-box;
    }
  </style>
</head>
<body>
<div class="container">
  <span>
    span
  </span>
</div>
</body>
</html>
复制代码

其中的关键属性是border和background-clip，border设置边框样式，background-clip的作用是规定background填充的范围。background-clip的默认值是border-box，表示填充元素的content + padding + border，还可以取值为content-box（填充元素的content）/padding-box(填充元素的content + padding)。如果不指定background-clip: padding-box，背景颜色的填充就会使得边框的样式效果无法显示