css怎么设置边框的透明度

广告:宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取~~~

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怎么设置边框的透明度的详细内容,更多请关注9543建站博客其它相关文章!

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:bootstrap是哪家开发的
下一篇:快速玩转网页样式

发表评论

关闭广告
关闭广告