css之半透明边框

时间 2019-12-09

标签 css 之半透明边框栏目 CSS 繁體版

原文原文链接

半透明边框

CSS 中颜色的取值：css

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

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

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~1ui

实现半透明边框的效果spa

<!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，背景颜色的填充就会使得边框的样式效果没法显示code