作者:周周微商互联 | 来源:互联网 | 2023-05-23 14:51
我一直在研究支持webkit 和 IE 9+的虚线边框.
我目前有一个'简单'的虚线边框效果,如下所示:
.bord {
height: 200px;
width: 300px;
background: gray;
border-radius: 20px;
position: relative;
}
.bord:before {
content: "";
position: absolute;
height: calc(90% - 10px);
width: calc(90% - 10px);
left: 5%;
top: 5%;
border: 5px dotted black;
}
渲染(在chrome中):
但我想:
使用纯CSS可以实现吗?
(因为我不能使用border-image,因为Internet Explorer 10和早期版本不支持border-image属性.)
我看了看文档,但无法看到任何引用,我已经看到的东西像这样,但显然并不能帮助我在这里.
我在这里缺少一个CSS属性吗?还是另一种可能性?(尽管如此,这些'圆点'应该是圆形的)但是"圆点"也是有益的.
Harry..
8
这是我能达到的最接近的.它使用单个伪元素偏移的多个框阴影到所需位置.
通过将下面的行添加到伪元素,也可以很容易地将其转换为虚线边框.
border-radius: 50%;
IE9 +也支持Box Shadow.
注意:如果您有一个固定的高度和宽度,这种方法将起作用.不是理想的方法,但我认为这是使用具有IE9 +支持的CSS可以实现的最多.
.bord {
height: 185px;
width: 250px;
background: gray;
border-radius: 20px;
position: relative;
padding: 25px;
}
.bord:before {
position: absolute;
top: 20px;
left: 20px;
content:'';
background: black;
height: 5px;
width: 5px;
box-shadow: 50px 0px 0px black, 100px 0px 0px black, 150px 0px 0px black, 200px 0px 0px black, 250px 0px 0px black, 0px 190px 0px black, 50px 190px 0px black, 100px 190px 0px black, 150px 190px 0px black, 200px 190px 0px black, 250px 190px 0px black, 0px 47.5px 0px black, 0px 95px 0px black, 0px 142.5px 0px black, 0px 47.5px 0px black, 250px 47.5px 0px black, 250px 95px 0px black, 250px 142.5px 0px black;
}
以下片段严格地说不是当前问题的答案,因为具体提到了IE9 +支持.这是我的原始答案(错误),并作为答案的一部分保留,以帮助可能不需要IE9支持的未来读者.此选项使用linear-gradient
和background-position
(两者都可以支持百分比值),因此可以比另一个更具可扩展性.
.bord {
height: 235px;
width: 300px;
background: gray;
border-radius: 20px;
position: relative;
}
.bord:before {
content: "";
position: absolute;
height: calc(90% - 10px);
width: calc(90% - 10px);
left: 5%;
top: 5%;
background: linear-gradient(90deg, black 10%, transparent 10%), linear-gradient(90deg, black 10%, transparent 10%);
background-size: 50px 5px;
background-repeat: repeat-x;
background-position: 5px 5px, 5px 195px;
}
.bord:after {
content: "";
position: absolute;
height: calc(90% - 10px);
width: calc(90% - 10px);
left: 5%;
top: 5%;
background: linear-gradient(0deg, black 10%, transparent 10%), linear-gradient(0deg, black 10%, transparent 10%);
background-size: 5px 50px;
background-repeat: repeat-y;
background-position: 5px 0px, 255px 0px;
}
1> Harry..:
这是我能达到的最接近的.它使用单个伪元素偏移的多个框阴影到所需位置.
通过将下面的行添加到伪元素,也可以很容易地将其转换为虚线边框.
border-radius: 50%;
IE9 +也支持Box Shadow.
注意:如果您有一个固定的高度和宽度,这种方法将起作用.不是理想的方法,但我认为这是使用具有IE9 +支持的CSS可以实现的最多.
.bord {
height: 185px;
width: 250px;
background: gray;
border-radius: 20px;
position: relative;
padding: 25px;
}
.bord:before {
position: absolute;
top: 20px;
left: 20px;
content:'';
background: black;
height: 5px;
width: 5px;
box-shadow: 50px 0px 0px black, 100px 0px 0px black, 150px 0px 0px black, 200px 0px 0px black, 250px 0px 0px black, 0px 190px 0px black, 50px 190px 0px black, 100px 190px 0px black, 150px 190px 0px black, 200px 190px 0px black, 250px 190px 0px black, 0px 47.5px 0px black, 0px 95px 0px black, 0px 142.5px 0px black, 0px 47.5px 0px black, 250px 47.5px 0px black, 250px 95px 0px black, 250px 142.5px 0px black;
}