border-image

Border-image shows 9-slice lines when parent element is scaled using transfrom

由 ◇◆丶佛笑我妖孽 提交于 2020-07-22 05:11:07
问题 I am using border-image property to create styled components with 9-slice. Also I am using css transform: scale(x) property to scale down/up my elements based on screen sizes. The issue I am running into is that my 9-slice component looks fine when scale is set to a whole number like 1, 2, 3... but if its a float then the border shows 9-slice lines/gaps and I am having hard time fixing it. I have tried setting different values for border-image-slice as well as the scale . Initially thought

Safari vs Chrome/Firefox: border-image vs border-color

由 大兔子大兔子 提交于 2020-02-22 05:08:51
问题 Safari treats border-color:transparent as overriding border-image , whereas the opposite is true in Chrome and Firefox. (Safari is consistent with the others if border-color is an opaque or semitransparent color. rgba(0,0,0,0) behaves the same as transparent . I don't know what IE does.) Concretely, this snippet: #wrapper { background-color: red; } #test { border-width: 10px; border-style: solid; border-color: transparent; border-image-source: url("data:image/png;base64

Border image stopped showing in Safari (OS and iOS)

由 老子叫甜甜 提交于 2020-01-07 03:14:07
问题 Border image stopped appearing in Safari on OS and iOS as well. I'm using Safari 10 on my Mac and latest version of iOS on my iPad and iPhone. It does show in Firefox the way it used show on all browsers. Website URL is: http://majesticpinescolorado.com/ #sidebar .inner{ border: 1px solid #8e8cae; -moz-border-image:url(images/border.png) 50 50 repeat; /* Old firefox */ -webkit-border-image:url(images/border.png) 50 50 repeat; /* Safari */ -o-border-image:url(images/border.png) 50 50 repeat; /

CSS border-image with transparent image shows an edge on Android

由 非 Y 不嫁゛ 提交于 2020-01-06 19:35:33
问题 This page http://wildlife.x-tremeteam.com utilizes the CSS border-image property and a .png image with a transparent edge to create a "torn paper" look on my divs. It works great except on my Android (Samsung SIII), whether I'm using its default browser or the Chrome app. On that I can see a slight edge on the inside and outside of the 20px border. Interestingly, I do not see the edge on the corners. The background of the div with the border is transparent. I only apply a background color to

border-image over an image

由 浪尽此生 提交于 2019-12-31 05:05:32
问题 I want to have a border image over an image. The border-image isn´t straight so the overlays should lie over the image and not behind. I tried this with z-index, but doesn´t work. The border doesn´t lie over my image. Here is the fiddle. I have tried it with this this code: .sprocket-mosaic-image-container { position: absolute; border-style:solid; border-width: 60px 28px 87px 24px; -moz-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat; -webkit-border-image: url(http://i

How to make CSS border-image work

由 孤者浪人 提交于 2019-12-12 17:20:29
问题 I am stuck with borders on my website. I want to put an image at the top of my vertical menu, one at the bottom and a background for the middle but that doesn't work. This is my code: .border-image { border: solid transparent 10px; //I tried with and without this line border-top-image: url(/pictures/menu_top.png) 10 round round; border-bottom-image: url(/pictures/menu_bottom.png) 10 round round; } #menu_left { background-image: url(/pictures/menu_middle.png); background-repeat:repeat-y; } I

CSS border-image: Only the corners filled with the specified background-image. Why?

由 别来无恙 提交于 2019-12-07 08:59:06
问题 I would like to use the CSS property "border-image": https://developer.mozilla.org/de/docs/Web/CSS/border-image But for some reason it fills only the four corners of the element: My code: .wrap { width: 400px; height: 300px; margin: 50px auto; position: relative; } .item { width: 100px; height: 100px; background-color: lightGray; border: 50px solid transparent; border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch; } <div class="wrap"> <div class="item"></div> </div>

CSS Border Image Gradient Not Working in Safari 10

由 扶醉桌前 提交于 2019-12-07 05:59:25
问题 I ran into an issue with Safari 10 and CSS border image gradients. It works in all other browsers, and even in Safari 9. It even shows up in Safari 10 in online simulators. Please see images below: (I guess that's IE 11, not IE 10. Thanks for the correction!) I assumed it was just my CSS so I really simplfied it and made a fiddle. You can see it at https://jsfiddle.net/tgbuxkee/ It's also generated below too. div { width: 200px; height: 200px; border: 6px solid transparent; -moz-border-image:

[CSS3.0] CSS-边框

由 谁都会走 提交于 2019-12-07 02:17:26
border-radius属性: 定义: 为元素添加圆角边框; 语法: border-radius: 1-4 length|% / 1-4 length|%; JavaScript语法: object.style.borderRadius="5px"; 详细: border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性; 示例: div { border:2px solid; border-radius:25px; } 注释：按此顺序设置每个 radius 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。 值 描述 length 定义圆角的形状 % 以百分比定义圆角的形状 box-shadow属性: 定义: 给边框添加一个或多个阴影 语法: box-shadow: h-shadow v-shadow blur spread color inset; JavaScript语法: object.style.boxShadow="10px 10px 5px #888888" 详细: 示例: div { box-shadow: 10px 10px 5px #888888; } 值 描述 h

Safari vs Chrome/Firefox: border-image vs border-color

由 删除回忆录丶 提交于 2019-12-06 01:27:50
Safari treats border-color:transparent as overriding border-image , whereas the opposite is true in Chrome and Firefox. (Safari is consistent with the others if border-color is an opaque or semitransparent color. rgba(0,0,0,0) behaves the same as transparent . I don't know what IE does.) Concretely, this snippet: #wrapper { background-color: red; } #test { border-width: 10px; border-style: solid; border-color: transparent; border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUA//////+xuF6gAAAACklEQVQIHWPADQAAGwABJwptqgAAAABJRU5ErkJggg==");
订阅 border-image