css 设置border透明度

最新推荐文章于 2025-04-16 14:45:00 发布
最新推荐文章于 2025-04-16 14:45:00 发布
阅读量2.2w 收藏 6
点赞数 3
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35081500/article/details/106220320
版权
本文介绍了如何在CSS中使用rgba()函数为边框设置透明度，通过实例展示了border属性结合rgba()的用法，例如：border-bottom:1px solid rgba(20,81,154,0.5); 其中0.5即为透明度值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

border的color使用rgba()

border-bottom: 1px solid rgba(20,81,154,0.5);

0.5 就是透明度

注意：使用rgba 不是 rgb

css 设置border边框颜色渐变效果
m0_67401270的博客
08-01 3万+
上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性（拉伸或平铺），而中间的那个格子则水平重复和垂直方向的重复都要执行。下图是起始点到10%的位置标蓝色，10%到30%蓝到白的渐变，30%到70%为白到橘的渐变，从70%到结束标记橘色。从上到下，从起始开始，透明向蓝色渐变到20%的位置，然后又向透明进行渐变到99%的位置，99%到结束是透明。创建线性渐变，需要设置一个起始点和方向（或角度），还要定义终止色，以及两者之间的可选色（可以有多个）。随着渐变的重复，颜色再次循环。...
HTML设置半透明的背景,CSS设置半透明背景实例详解
weixin_42500739的博客
06-16 3797
CSS设置半透明背景的方法有很多种，我这里根据自己的经验来与大学分享学习常用的CSS设置半透明背景设置方法总结。无图片半透明背景css如果，单纯地用背景色并结合opacity进行设置透明度，那么会出现子元素中的文字也同样出现透明的情况。第二种情况：用png透明度合适的背景图，但这样的话，还得针对IE6进行PNG图片的灰色背景处理。第三种方法：用rgba结合专用hack兼容常规浏览器。Rgba进行背...
css：怎么设置border-bottom为#fff且这条bottom边框的透明度为16
fury的博客
12-10 230
怎么设置border-bottom为#fff且这条bottom边框的透明度为16。
学习`border-color`知识
最新发布
m0_72030584的博客
04-16 418
学习`border-color`知识从概念到各种案例学习
css border设置为透明
魔侠的沙滩
11-17 6246
当元素自己有背景颜色时，border的颜色设置为rgba(0, 0, 0, 0.5)，透明度会无效。
border透明度
weixin_30702887的博客
12-22 1511
border需要设置透明度时，用box-shadow要比用border：5px solid rgba（）设置的透明度更高。 转载于:https://www.cnblogs.com/niujie/p/6212670.html
css设置透明的border
热门推荐
树上骑个猴的博客
04-08 1万+
.container{ background-color: black; border: 1px solid;/*设置透明边框*/ }
css设置border-bottom透明度
深漂小码哥
07-15 2230
/** 注意事项： 1.rgba不是rgb，最后一个参数是透明度，本例即0.06 2.十六进制颜色值要转为rgb的，本例#000000转为RGB为rgb(0,0,0) **/ border-bottom: 1px solid rgba(0,0,0,0.06);
css实现边框透明的方法
weixin_33972649的博客
03-24 707
通常我们设置边框是喜欢使用 border:1px solid #cccccc;类似这样的写法，我们如果想要实现透明的边框也是可以的只要改一下写法。使用rgba这个方法最后一个就可以表示要设置的透明度，遗憾的是只有非ie浏览器支持这种写法。示例如下:border-bottom:1pxsolidrgba(241,247,254,0.5); 转载于:https:/...
css-border-effects.zip
07-03
9. **边框透明度**：利用`rgba()`函数，可以在边框颜色中设置透明度，以创建半透明边框。 10. **伪元素与边框**：CSS的伪元素如`:before`和`:after`可用于创建复杂的边框效果，例如在元素内部添加额外的装饰性边框...
html设置分割线虚线,css border设置虚线样式
01-15
下面将详细讲解如何利用HTML和CSS中的`border`属性来设置虚线样式，以及创建分割线的方法。 首先，HTML没有专门的标签用于创建分割线，但我们可以使用`<hr>`标签来模拟分割线的效果。`<hr>`标签在页面中生成一条...
css 背景半透明最佳实践
09-25
本文将探讨两种实现CSS背景半透明的最佳实践方法。 首先，一种简单但存在问题的方法是使用`opacity`属性结合`Alpha Filter`。`opacity`属性在现代浏览器中可以方便地设置元素及其所有子元素的透明度，例如`.opacity...
border 透明
u010688943的博客
02-27 858
平时一用这个透明 就忘了怎么写 决定记下来.box1{ border-bottom:1px soild transparent; }
css透明度设置
alaric's blog
08-23 708
首先今天我在ff下设置rgba（255,128,0,0.5） 在ff下没问题 在ie8下无法正常识别 我的写法是 qo.css({ background: "none repeat scroll 0% 0% rgba(255, 128, 0,0.5)",color: "rgb(255, 255, 255)", "font-weight": "bolder"}); 后来网上查下： opacit
css半透明边框
weixin_34004750的博客
05-09 281
核心：背景色会默认延伸到border下层。这里主要使用到background-clip属性，属性值包括border-box（背景延伸至边框外沿，但是在边框下层），padding-box（背景延伸至内边距外沿。不会绘制到边框处），content-box（背景被裁剪至内容区外沿）、text （背景被裁剪成文字的前景色,这是个实验性API，生产还不能用） <head> <title&...
CSS干货1-透明边框
九天翔龙的技术博客
02-17 2035
在一个项目中，要得到一个透明边框。 好简单~开始干~！ HTML： &lt;div class="box"&gt; &lt;/div&gt; CSS： .box{ width: 300px; height: 150px; margin: 100px; background: #f00...
border --- 透明边框
weixin_34203426的博客
10-06 205
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>透明边框</title> <style> body { background: url('ht...
css 边框透明
spfLinux的博客
12-20 1623
border: 3px solid transparent; 解决hover时出现边框造成的布局抖动。
php如何让边框变成透明_css如何让边框透明？
weixin_32238157的博客
03-09 331
透明一般认为是一种颜色属性，但是并没有这个数值。我们找到了一种让边框实现透明的最佳方案，运用RGBA设置。css可以使用RGBA设置边框透明，RGBA在RGB的基础上多了控制alpha透明度的参数，我们使用RGBA设置边框颜色同时可以设置边框透明度。RGBA在RGB的基础上多了控制alpha透明度的参数。R(红)、G(绿)、B(蓝)三个参数，正整数值的取值范围为：0 – 255或用百分数值的取值范...
CSS border属性详解：综合设置与实例
在实际应用中，border属性的综合设置涉及到如设置边框圆角、阴影、透明度、动画效果等高级技巧，以实现丰富的视觉效果。掌握好这个属性，对于创建美观且可维护的网页界面至关重要。同时，CSS的其他特性如盒模型、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值