All geek questions in one place

Different box-shadow behavior in Chrome and Firefox

I want to create something like this:

result

I prepared the following test page:

p { display: inline; background-color: yellow; box-shadow: 10px 0px 0px red, -10px 0px 0px red; } 
 <!DOCTYPE html> <html> <head> </head> <body> <p>Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.</p> </body> </html>

However, the result looks different in Chrome and Firefox. From my point of view, the Chrome version is fine, but I don’t like the result in Firefox.

Chrome Chrome

Firefox Firefox

Is there a way to achieve the same result in Firefox as in Chrome? I am open to any solution, there is no need to use the box-shadow property.

+5
source share
2 answers

Not box-decoration-break:clone , what are you after?

 p { display: inline; background-color: yellow; box-shadow: 10px 0px 0px red, -10px 0px 0px red; box-decoration-break: clone; } 
 <!DOCTYPE html> <html> <head> </head> <body> <p>Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.</p> </body> </html>
+3
source

In accordance with your comment, I am sending this answer -

Here is a workaround to use :after to get the result according to your image.

 p { display: inline; line-height:20px; background-color: yellow; position:relative; } .p-wrapper{ position:relative; display:inline-block; } .p-wrapper:after{ content:''; background:#000; position:absolute; left:-10px; right:-10px; top:-10px; bottom:-10px; z-index:-1; } 
 <!DOCTYPE html> <html> <head> </head> <body> <div class="p-wrapper"> <p>Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.</p> </div> </body> </html>
+1
source

Source: https://habr.com/ru/post/1272039/

More articles:


All Articles