没有报告CSS错误，但border-image-source和border-image-slice不会产生任何边框图像
水冷却器v2
我正在练习并尝试显示边框图像。我创建了图像，可以在这里找到它。
我正在运行64位Firefox 60.0.1。
我检查了开发人员工具中的“网络”选项卡，图像加载正常。我@supports 的规则也很好。而且没有CSS错误。
但是，我完全看不到边框图像。
div {
width: 250px;
height: 120px;
background-image: linear-gradient(90deg, rgba(40, 180, 255, 0.9), rgba(40, 100, 255, 0.9));
font-size: 2em;
font-family: Geneva;
margin: 100px auto 0px auto;
padding: 10px;
}
@supports (border-image-source: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/Border.png)) {
div {
border-image-source: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/Border.png);
border-image-slice: 30%;
border-image-repeat: round;
}
}<div>This is a nice div.</div> fen1x
设置border具有一定宽度的属性：
div {
border: 20px solid orange;
width: 250px;
height: 120px;
background-image: linear-gradient(90deg, rgba(40, 180, 255, 0.9), rgba(40, 100, 255, 0.9));
font-size: 2em;
font-family: Geneva;
margin: 100px auto 0px auto;
padding: 10px;
}
@supports (border-image-source: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/Border.png)) {
div {
border-image-source: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/Border.png);
border-image-slice: 30%;
border-image-repeat: round;
}
}<div>This is a nice div.</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Linux的官方Adobe Flash存储库是否已过时？
- 2
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 3
如何检查字符串输入的格式
- 4
如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是
- 5
Modbus Python施耐德PM5300
- 6
错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'
- 7
用日期数据透视表和日期顺序查询
- 8
检查嵌套列表中的长度是否相同
- 9
Java Eclipse中的错误13，如何解决？
- 10
ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）
- 11
如何监视应用程序而不是单个进程的CPU使用率？
- 12
如何自动选择正确的键盘布局？-仅具有一个键盘布局
- 13
ES5的代理替代
- 14
在令牌内联程序集错误之前预期为 ')'
- 15
有什么解决方案可以将android设备用作Cast Receiver？
- 16
套接字无法检测到断开连接
- 17
如何在JavaScript中获取数组的第n个元素？
- 18
如何将sklearn.naive_bayes与（多个）分类功能一起使用？
- 19
应用发明者仅从列表中选择一个随机项一次
- 20
在Windows 7中无法删除文件（2）
- 21
ggplot：对齐多个分面图-所有大小不同的分面
我来说两句