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 >输出如下：
另一种替代方法是使用单个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 >输出如下：
