这篇文章将为大家详细讲解有关css如何设置边框的透明度,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""。2.内嵌样式,就是将CSS代码写在之间,并且用
进行声明。3.外部样式,其中链接样式是使用频率最高,最实用的样式,只需要在之间加上
就可以了。其次就是导入样式,导入样式和链接样式比较相似,采用@import样式导入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如何设置边框的透明度”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。