请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

模板之家 首页 教程频道 查看内容

css如何让边框透明

模板之家 2021-5-16 16:34

分享至 : QQ空间
收藏

css让边框透明的方法:首先创建一个HTML示例文件;然后在body中创建一个div;最后通过给div设置“border-top:10px solid rgba(200,200,200,0.25);”样式即可让指定的边框透明。

css让边框透明的方法:首先创建一个HTML示例文件;然后在body中创建一个div;最后通过给div设置“border-top:10px solid rgba(200,200,200,0.25);”样式即可让指定的边框透明。

本文操作环境:windows7系统、HTML5&&CSS3版,DELL G3电脑

透明一般认为是一种颜色属性,但是并没有这个数值。我们找到了一种让div实现透明的最佳方案,运用RGBA

RGBA在RGB的基础上多了控制alpha透明度的参数。R(红)、G(绿)、B(蓝)三个参数,正整数值的取值范围为:0 – 255或用百分数值的取值范围为:0.0% – 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值

RGBA语法示例:

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

接下来演示如和让边框透明:

给div设置如下样式:

div {    width: 100px;    
height:100px;    border-top:10px solid  rgba(200,200,200,0.25);    border-right:10px solid  rgba(200,200,200,0.5);    border-bottom: 10px solid  rgba(200,200,200,0.75);    border-left:10px solid  rgba(200,200,200,1);}

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

d676a1ab26d3cc95fe5dc4ce4b8cd0b.png

学习视频分享:css视频教程

以上就是css如何让边框透明的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章!


路过

雷人

握手

鲜花

鸡蛋
来自: 网络收集
文章评论0人参与
热门频道
  • ecshop成人用品商城网站源源码模板 微信小
  • ecshop微信小程序代生成服务 可选购小程序
  • 【可选购小程序】ecshop生鲜食品蔬菜水果特
  • 【可选购小程序】ecshop医药品保健药房网站
  • ecshop百货超市日用品网站 免费生成微信小
  • ecshop办公用品文具耗材设备 免费生成微信
  • 【可选购小程序】ecshop家居家纺床上用品源
  • 【可选购小程序】ecshop户外运动体育用品健
  • ecshop整站数据打包 带数据 适合申请支付、
  • ecshop跨境购海淘微信分销商城网站源码模板
    推荐文章
  • 热门
  • 最新
返回顶部