css如何设置边框透明

PHP中文网 JavaScript

本文摘自PHP中文网，作者醉折花枝作酒筹，侵删。

在css中，可以使用border属性配合rgba()设置所有边框透明；也可以使用border-top、border-right、border-bottom、border-left属性与rgba()配合设置某个边框透明。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css怎么让边框透明：

运用RGBA，红色和绿色和蓝色三个百分比都为200，a为参数，可以设置成0到1之间的数字，但是千万不要为负值，语法如下：

1

2

3

.div {

    background: rgba(200,200,200,0.75);

}

接下来，我们给div增加样式，首先先设置上下左右四个边框，同时设置四个边框设置相同高度和宽度，代码如下：

1

2

3

4

5

6

7

8

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);

}

显示效果：

1573436930169896.jpg

我们可以通过对参数的改变的，就可以调整边框的透明度，a的参数越大，就表示颜色越深，a的值为0就显示透明。

推荐学习：css视频教程

以上就是css如何设置边框透明的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

css如何实现各种形状

input能改变css样式吗

css层叠样式表的含义是什么

css如何设置指定网格的大小和位置

css换行代码是什么

css因mime类型不匹配而被忽略怎么办

css和div的区别是什么

css隐藏元素的几种方法中可以触发点击事件的是？

css子类选择器是什么

css背景如何设置透明度

更多相关阅读请进入《css》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...