css3 -moz-border-image无法正常工作？
[英]css3 -moz-border-image isn't working?
问题描述
I'm new to CSS3 and HTML and I'm trying to get the -moz-border-image to show but it isn't showing instead it shows border: 20px solid red; 
我是CSS3和HTML的新手，我正在尝试显示-moz-border-image ，但没有显示，而是显示了border: 20px solid red; even if i get rid of the border code it still wont show the -moz-border-image because it needs a border-width to show and all the code is in .sampleDiv2 . 即使我摆脱了border代码，它仍然不会显示-moz-border-image因为它需要显示边界宽度，并且所有代码都在.sampleDiv2 。
I'm using a firefox browser. 我正在使用Firefox浏览器。 Thanks 谢谢
<!doctype html> <html> <head> <title>CSS3 borders</title> <style> body { margin-left: 40px; } .sampleDiv { background-color: rgba(255, 0, 0, .2); width: 200px; height: 200px; border-width: 16px; border-style: solid; border-color: red; border-radius: 25px 50px 100px 200px; } .sampleDiv2 { background-color: rgba(255, 0, 0, .2); width: 200px; height: 200px; -moz-border-image: url( http://s28.postimg.org/hs0wu7rvx/star_frame.png) 50 50 50 round; border: 20px solid red; } </style> </head> <body> <h1>CSS3 borders</h1> <div class="sampleDiv"></div> <br/> <div class="sampleDiv2"></div> </body> </html>
This is what should happen to
.sampleDiv2 because i did 50px for the slice property , 50px for how much of the width i wont to use, i did 50px for the outside border (What i am talking about wont match the picture because im guessing it's big) and round to go around the border.
这是应该发生什么.sampleDiv2因为我没有50px对于该层物业， 50px的多少宽度我不会用的，我做了50px的外边框（我所谈论的习惯相匹配的图片，因为即时猜测它是大）和round去周围的边框。
1 个解决方案
解决方案1
1 2015-01-22 11:43:17
I got it to work. 我知道了。
body {
margin-left: 40px;
}
.sampleDiv {
background-color: rgba(255, 0, 0, .2);
width: 200px;
height: 200px;
border-width: 16px;
border-style: solid;
border-color: red;
border-radius: 25px 50px 100px 200px;
}
.sampleDiv2 {
background-color: rgba(255, 0, 0, .2);
width: 200px;
height: 200px;
-moz-border-image:url("http://s28.postimg.org/hs0wu7rvx/star_frame.png") 30 30 repeat; /* Old Firefox */
-webkit-border-image:url("http://s28.postimg.org/hs0wu7rvx/star_frame.png") 30 30 repeat; /* Safari */
-o-border-image:url("http://s28.postimg.org/hs0wu7rvx/star_frame.png") 30 30 repeat; /* Opera */
border-image:url("http://s28.postimg.org/hs0wu7rvx/star_frame.png") 30 30 repeat;
}
Fiddle: http://jsfiddle.net/kzoydpwL/ 小提琴： http ： //jsfiddle.net/kzoydpwL/
EDIT: You can learn about border-image at this link ... 编辑：您可以在此链接了解border-image ...
The major problem you had with your code was that you didn't even provide an image link. 您的代码存在的主要问题是您甚至没有提供图像链接。 http://postimg.org/image/3ll5yzh0p/ is not a direct link to the image while http://s28.postimg.org/hs0wu7rvx/star_frame.png is. http://postimg.org/image/3ll5yzh0p/不是直接链接到图片，而http://s28.postimg.org/hs0wu7rvx/star_frame.png是直接链接。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.