作者:张群羽圣文 | 来源:互联网 | 2023-05-18 18:43
Ihavetriedtoimplementanenvelopebordereffectonmypage.我试图在我的页面上实现一个“信封边界”效果。Basically
I have tried to implement an "envelope border" effect on my page.
我试图在我的页面上实现一个“信封边界”效果。
Basically, it's the same as this in codepen:
基本上,这和codepen是一样的:
http://codepen.io/danichk/pen/KdorYJ
http://codepen.io/danichk/pen/KdorYJ
.box {
padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
max-width: 20em;
font: 100%/1.6 Baskerville, Palatino, serif;
}
But it doesn't work in safari. And I also found that even the example of 'border-image' in w3schools seems not working. Which already consider multi-browser supported.
但它在safari中行不通。我还发现,即使在w3schools的“边界图像”(border-image)这个例子似乎也不起作用。它已经考虑了多浏览器支持。
http://www.w3schools.com/css/tryit.asp?filename=trycss3_border-image3
http://www.w3schools.com/css/tryit.asp?filename=trycss3_border-image3
In fact, I have also tried compass to generate a "multi-browser" friendly css as below:
事实上,我也尝试过用compass来生成一个“多浏览器”的友好css,如下所示:
compass:
指南针:
$envelop-border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
.envelope-border {
padding: 1em;
border: 16px solid transparent;
@include border-image($value: $envelop-border-image);
}
css
css
.envelope-border {
padding: 1em;
border: 16px solid transparent;
-moz-border-image: 16 -moz-repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
-moz-border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
-o-border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
-webkit-border-image: 16 -webkit-repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
-webkit-border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
border-image: 16 -moz-repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
border-image: 16 -webkit-repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em);
}
Does anybody have any idea about it? Many thanks.
有人知道吗?多谢。
My Safari version is: Version 10.0.1 (12602.2.14.0.7)
我的Safari版本是:版本10.0.1 (12602.2.14.7)
2 个解决方案
推荐阅读
Iamusingafixedheightimagetofilladivwithgradientcolorusingsomethinglike:background:t ...
[详细]
蜡笔小新 2023-10-13 09:24:50
本文介绍了程序员如何选择机械键盘轴体,特别是红轴和茶轴的对比。同时还介绍了U盘安装Linux镜像的步骤,以及在Linux系统中安装软件的命令行操作。此外,还介绍了nodejs和npm的安装方法,以及在VSCode中安装和配置常用插件的方法。最后,还介绍了如何在GitHub上配置SSH密钥和git的基本配置。 ...
[详细]
蜡笔小新 2023-12-09 05:31:17
varbrowser{versions:function(){varunavigator.userAgent,appnavigator.appVersion;retur ...
[详细]
蜡笔小新 2023-10-13 07:03:41
background:-webkit-gradient(linear,10%10%,100%100%, ...
[详细]
蜡笔小新 2023-09-25 18:49:33
本文讨论了在使用Git进行版本控制时,如何提供类似CVS中自动增加版本号的功能。作者介绍了Git中的其他版本表示方式,如git describe命令,并提供了使用这些表示方式来确定文件更新情况的示例。此外,文章还介绍了启用$Id:$功能的方法,并讨论了一些开发者在使用Git时的需求和使用场景。 ...
[详细]
蜡笔小新 2023-12-09 09:55:13
Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ...
[详细]
蜡笔小新 2023-10-16 11:26:13
这个问题发生在重新安装系统后,丢失了之前的privatekey等。所以解决方法就是提示的revokeandrequest。到developercenter中找到certificat ...
[详细]
蜡笔小新 2023-10-15 12:07:56
蜡笔小新 2023-10-13 11:36:06
这篇文章主要介绍css如何设置input的placeholder字体样式,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!设置input的placeh ...
[详细]
蜡笔小新 2023-10-13 10:49:48
所有设备的CSS3媒体查询原文:https://www. ...
[详细]
蜡笔小新 2023-10-13 10:10:33
Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ...
[详细]
蜡笔小新 2023-10-09 19:41:30
CSS:body{font-size:62.5%;}为什么???在网页设计中我们经常看见body{font-size:62.5%;}这样的设置,为什么偏偏是62.5%呢?这主要是为了方便em与p ...
[详细]
蜡笔小新 2023-09-25 20:24:32
本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ...
[详细]
蜡笔小新 2023-09-25 13:50:50
小编给大家分享一下怎么用css3实现图片的高斯模糊效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后 ...
[详细]
蜡笔小新 2023-09-24 14:56:09
过往项目2018年9月份项目汇总(共26个项目)2018年8月份项目汇总(共29个项目)2018年7月份项目汇总(共29个项目)2018年6月份项目汇总(共27个项目)2018年5 ...
[详细]
蜡笔小新 2023-09-18 20:39:06