css如何设置边框透明

512 阅读 0 评论 338 点赞

我是靠谱客的博主忧郁皮皮虾，这篇文章主要介绍css如何设置边框透明，现在分享给大家，希望可以做个参考。

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

css怎么让边框透明：

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

.div {
    background: rgba(200,200,200,0.75);
}
登录后复制

接下来，我们给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);
}
登录后复制

显示效果：