如何使用CSS创建透明边框?

2021年3月10日15:52:56 发表评论 740 次浏览

In的CSS, 我们可以使用来创建透明边框边境嵌套的属性div标签。

创建步骤如下:

第1步:

创建一个嵌套

div

标签。

第2步:

指定外层

div

标签的

边框样式

成为

固体

边框宽度

属性可以是任何所需的大小。

第三步:

内部尺寸

div

标签比外部小

div

标签。

另外, 我们可以使用边境简写属性, 如下面的示例所示。

范例1:使用上述方法在CSS中创建透明边框

<!DOCTYPE html>
< html >
  
< head >
     < style type = "text/css" >
         h1 {
             color: green;
         }
          
         .outer {
             width: 300px;
             height: 300px;
             margin: 10%;
             border: 10px solid rgba(0, 0, 0, .4);
             border-radius: 5px;
         }
          
         .inner {
             width: 270px;
             height: 270px;
             margin: auto;
             margin-top: 3%;
             text-align: center;
             background: rgba(0, 0, 0, .4);
             border-radius: 5px;
             padding: 5px;
         }
     </ style >
</ head >
  
< body >
     < div class = "outer" >
         < div class = "inner" >
             < h1 >lsbin</ h1 >
         </ div >
     </ div >
</ body >
  
</ html >

输出如下:

使用CSS创建透明边框1

另一种替代方法是使用单个div标记并使用边框样式和背景剪辑属性以创建透明边框。

重现此步骤是:

第1步:

创建一个

div

标签。

第2步:

指定

边框样式

财产

在框周围设置两个边框。

第三步:

设置

背景剪辑

财产

填充盒

它将背景色剪切到元素的填充上。

范例2:使用上面讨论的替代方法在CSS中创建透明边框。

<!DOCTYPE html>
< html >
  
< head >
     < style type = "text/css" >
         h1 {
             color: green;
         }
          
         .trans_border {
             width: 270px;
             height: 270px;
             margin: auto;
             margin-top: 3%;
             text-align: center;
             border: 20px double rgba(0, 0, 0, .4);
             background: rgba(0, 0, 0, .4);
             background-clip: padding-box;
             border-radius: 5px;
             padding: 5px;
         }
     </ style >
</ head >
  
< body >
     < div class = "trans_border" >
         < h1 >lsbin</ h1 >
     </ div >
</ body >
  
</ html >

输出如下:

使用CSS创建透明边框2

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: