box-shadow not working properly in chrome - css

I have the following code:
a.menu_item{
box-shadow: .8px .8px 0px 0px #ffffff,3px 3px 0px 0px #676568;
-webkit-box-shadow: .8px .8px 0px 0px #ffffff,3px 3px 0px 0px #676568;
-moz-box-shadow: .8px .8px 0px 0px #ffffff,3px 3px 0px 0px #676568;
text-decoration: none;
}
Working propely in IE9, 10 and Firefox- displays a white border on the bottom and the right and another one like a shadow outside the first border. The problem is that in chrome, the white border is not displayed. Any idea?

Related

box-shadow inset no longer working in Edge?

Why would this no longer be working in Microsoft Edge?:
-webkit-box-shadow: 0px 0px 350px #000 inset;
-ms-box-shadow: 0px 0px 350px #000 inset;
box-shadow: 0px 0px 350px #000 inset;
Here's an example (the hero graphic should have an inset box shadow - which it does in Firefox and Chrome):
www.gallowaycottageholidays.com
Thank you.
NJ

how to put a vertical line in sudoku table

im try to get vrticl line Under the arrow.
for the horizental line i used .
webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.99);
box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.99);

If you're specifically wanting to use box-shadow, you can use the first property in the box-shadow shorthand, which adjusts the horizontal offset:
webkit-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.99);
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.99);
But given you're not using box-shadow to get a shadow effect (i.e. not using blur or spread), a border might be preferable, as it'll give you the same divider look you're after, but will be repositioned if you adjust the padding between your cells. You can do away with your browser prefixes too:
border-right: 3px solid rgba(0,0,0,0.99);
border-bottom: 3px solid rgba(0,0,0,0.99);

Use box-shadow: 5px 0 2px -2px rgba(0,0,0,0.99);
This sets the X offset more to the right.

Shadow box only for inner box of container

I am using box-shadow but it makes the whole container wrapped with shadow, how can I make a shadow only in the inside (top center) box?

Have you tried INSET this will put a shadow on the inside of an element.
.shadow{
box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-webkit-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-moz-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-o-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
}

inset box shadow not working in my case?

div{
height:100px;
width:100px;
background:pink;
box-shadow: 0px 0px 0px 3px #000;
}
Above css worked but when I do box-shadow: inset 0px 0px 0px 3px #000; is wasn't work, I also tried box-shadow: 0px 0px 0px 3px #000 inset. Any idea?

try it with smaller number of parameters:
box-shadow: inset 0px 0px 3px #000;
or with specified engine:
-moz-box-shadow: inset 0px 0px 10px #000000;
-webkit-box-shadow: inset 0px 0px 10px #000000;
box-shadow: inset 0px 0px 10px #000000;

The syntax of box-shadow property is as follows:
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
You are not setting any value to h-shadow and v-shadow. That is why you are not able to see a shadow.
Try this code
div {
box-shadow: 10px 10px 5px #888888;
height: 100px;
width: 100px;
}
<div>
</div>

CSS margin won't work in stylesheet but in code

I have a style that works fine in "code":
<img class="minbild" style="margin-right: 22px; float: left;" src="/images/Etiketter/AmarilloSingleHopEtikett.jpg" alt="AmarilloSingleHopEtikett" width="300" height="300" />
This will set the margin-right to 22 px. When I move it to the "minbild" class it stops working...
.minbild {
margin-right:62px;
box-shadow: 0px 0px 0px 1px #555, 0px 0px 0px 10px #eee, 0px 0px 0px 11px #555, 3px 3px 5px 11px #555;
-moz-box-shadow: 0px 0px 0px 1px #555, 0px 0px 0px 10px #eee, 0px 0px 0px 11px #555, 3px 3px 5px 11px #555;
-webkit-box-shadow: 0px 0px 0px 1px #555, 0px 0px 0px 10px #eee, 0px 0px 0px 11px #555, 3px 3px 5px 11px #555;
}
Anyone have any idea why this is happening? I use the same css-file for my jceditor and it shows the margin fine! I have tried Chrome and IE9.

Remove the inline css, it should fix the problem:
<img class="minbild" src="/images/Etiketter/AmarilloSingleHopEtikett.jpg" alt="AmarilloSingleHopEtikett" width="300" height="300" />
Inline CSS was taking priority over external css.

Resources