• 豌豆资源网
  • 开引网企业服务
  • 服务外包网
  • css使用rgba()或hsla()设置半透明或完全透明边框border

    在css中我们想实现透明颜色,首先就会想到rgba()和hsla()这2个属性。这篇文章就简单介绍下使用这2种方式来实现半透明边框。

     

    1、使用rgba方式:

    1 border: 10px solid rgba(255,255,255,.5);

    51220网站目录 https://www.51220.cn

    说明:rgba分别对应红绿蓝和透明值,其中rgb区间为0(纯黑)至255(纯色)透明度a区间为0(完全透明)至1不透明。

     

    2、使用hsla方式:

    1 background: white;
    2 border: 10px solid hsla(0, 0%, 100%, .5);
    3 background-clip: padding-box;

     

    说明:默认情况下,背景的颜色会延伸至边框下层,在css3中,我们可以通过设置background-clip:padding-box来改变背景的默认行为,达到我们想要的效果。

    HSLA(H,S,L,A) 的参数说明:

    H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360S:Saturation(饱和度)。取值为:0.0% - 100.0%L:Lightness(亮度)。取值为:0.0% - 100.0%A:Alpha透明度。取值0~1之间。注:此色彩模式与HSL相同,只是在HSL模式上新增了Alpha透明度。

     

    posted @ 2020-06-11 14:43  前端一点红  阅读(3175)  评论(0编辑  收藏  举报
  • 乐游资源网
  • 热爱资源网
  • 灵活用工代发薪平台
  • 企服知识
  • 355软件知识