css怎么设置边框的透明度

css中可通过border-color属性和RGBA()函数设置边框透明度，只需给边框元素添加“border-color: rgba(红,绿,蓝,透明度值)”样式即可。border-color可设置边框颜色，而RGBA()可设置颜色透明度。

本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。

css设置边框的透明度

在css中，可通过border-color属性和RGBA()函数设置边框透明度。

代码示例：

!DOCTYPE html>
    html>
        head>
            meta charset="UTF-8">
            style type="text/css">
        	div{
            		border:10px solid;
            		margin: 10px 0;
        	}
            /style>
        /head>
        body>
            div style="border-color: rgba(0,153,0,0.1);
    ">
    测试文本，透明度0.1/div>
            div style="border-color: rgba(0,153,0,0.5);
    ">
    测试文本，透明度0.5/div>
            div style="border-color: rgba(0,153,0,0.8);
    ">
    测试文本，透明度0.8/div>
            div style="border-color: rgba(0,153,0,1.0);
    ">
    测试文本，透明度1.0/div>
        /body>
    /html>
    

效果图：

说明：

border-color属性可以设置边框颜色，而RGBA()函数可以设置颜色透明度。

RGBA 的意思是（red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。

语法：

rgba（R,G,B,A）;
    

rgba() 里的值的介绍：

• R：红色值。正整数 （0~255）

• G：绿色值。正整数 （0~255）

• B：蓝色值。正整数（0~255）

• A：透明度。取值0~1之间

（学习视频分享：css视频教程）

以上就是css怎么设置边框的透明度的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！