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 等宽字体有哪些

css child选择器有哪些？

css如何实现模糊背景效果

css的优点和缺点分别是什么

css如何设置超链接的样式

css在html中三种实现方式是什么

css什么意思？

css怎么设置字体白色描边

css怎么让div垂直居中

css z-index属性怎么用

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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