!
也想出现在这里? 联系我们
广告位

CSS实现边框透明的方法

透明一般认为是一种颜色属性,但是并没有这个数值。我们找到了一种让边框实现透明的最佳方案,运用 RGBA 设置。 css 可以使用 RGBA 设置边框透明,RGBA 在 RGB 的基础上多了控制 alpha 透明度的参数,我们使用 RGBA 设置边框颜色同时可以设置边框透明度。RGBA 在 RGB 的基础上多了控制 alpha 透明度的参数。R(红)、G(绿)、B(蓝)三个参数,正整数值的取值范围为:0 – 255 或用百分数值的取值范围为:0.0% – 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A 参数,取值在 0~1 之间,不可为负值。

RGBA 语法:

  1. .div {background: rgba(200,200,200,0.5);}

接下来演示如和让边框透明,设置左右边框完全透明 css 代码

  1. div
  2. {
  3. width: 100px;
  4. height:100px;
  5. border-top:10px solid rgba(200,200,200,0.25);
  6. border-right:10px solid rgba(200,200,200,0.5);
  7. border-bottom: 10px solid rgba(200,200,200,0.75);
  8. border-left:10px solid rgba(200,200,200,1);
  9. }

显示效果如图所示,每一边的透明度都不一样。当我们需要设置边框的透明度的时候,根据需要填写最后一个数值在 0-1 之间就可以了。

给TA打赏
共{{data.count}}人
人已打赏
前端学习

PHP 实现图片 Base64 编码与解码

2024-8-30 14:17:17

前端学习

jQuery 鼠标滑过链接图片滑动展开与隐藏效果

2024-8-30 14:17:24

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索