The box shadow does not envelop the entire block uniformly

I have been struggling to evenly cover the shadows around all the blocks using CSS. Unfortunately, after working on it for 2 days, I still haven't been able to find a solution. The middle line seems to be misaligned and thicker compared to the others. Any ideas on how to fix this?

.shadow1{
box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4);
  width:250px; 
height:200px; 
background-color: rgba(0,0,0, .2); 
position:relative; 
}
.shadow2{
box-shadow: inset -5px 0px 0px 5px rgba(255, 255, 255, 0.4);
  width:250px; 
height:200px; 
background-color: rgba(0,0,0, .2); 
position:relative; 
}
.shadow3{
box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4);
  width:250px; 
height:200px; 
background-color: rgba(0,0,0, .2); 
position:relative; 
}
.shadow4{
box-shadow: inset -5px 0px 0px 5px rgba(255, 255, 255, 0.4);
  width:250px; 
height:200px; 
background-color: rgba(0,0,0, .2); 
position:relative; 
}
<div class="shadow1"> </div>
<div class="shadow2"> </div>
<div class="shadow3"> </div>
<div class="shadow4"> </div>

htmlcss

Answer №1

Uncertain about your exact requirements, but based on my interpretation, is this what you are looking for? 

.shadow1{
box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4);
  width:250px; 
height:200px; 
background-color: rgba(0,0,0, .2); 
position:relative;
}
.shadow2{
box-shadow: inset -5px 0px 0px 5px #ddd;
  width:250px; 
height:200px; 
background-color: rgba(0,0,0, .2); 
position:relative; 
    margin-top:-5px;
}
.shadow3{
box-shadow: inset 0px 0px 0px 5px #ddd;
  width:250px; 
height:200px; 
background-color: rgba(0,0,0, .2); 
    position:relative; 
    margin-top:-5px;
}
.shadow4{
box-shadow: inset -5px 0px 0px 5px #ddd;
  width:250px; 
height:200px; 
background-color: rgba(0,0,0, .2); 
position:relative;
     margin-top:-5px;
}
<div class="shadow1"></div>
<div class="shadow2"></div>
<div class="shadow3"></div>
<div class="shadow4"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to turn off a sticky header on Mobile using CSS

Below is the code I am using to create a fixed header on my website. <?php } ?> <header id="header" class="<?php if ( theme_option( THEME_OPTIONS, 'enable_header_fixed' ) == 'true' ) : ?> fixed_header <?php else : ?&g ...

phpcss

Expand the div width to the specified measurement horizontally

Is there a way to horizontally collapse a div (container) to a specific width that I can adjust, effectively hiding its content? The collapse effect should move towards the left. <div id="container"> <button type="button" id="myButton"> ...

javascriptjquerycss

Issue encountered when sending information to asmx web service via ajax and displaying the result on an HTML page with a javascript function

I have developed an ASMX web service that looks like this: [ScriptService] public class CurrencyData : System.Web.Services.WebService { [WebMethod] public string DisplayCurrency(double amount, string sign ,string style) { swi ...

javascriptjqueryhtmlajaxweb-services

To insert a <div> element within a <tr> element while preserving the exact position of the <tr> tag - here's how you can do it:

I have a challenge with my table where I need to add a green progress bar in the form of a div element within a tr. The width of this progress bar should change dynamically from 0% to 100%, reflecting the current runtime of the video associated with that p ...

javascriptjqueryhtmlcss

Altering the background color of an individual mat-card component in an Angular application

Here is the representation of my mat-card list in my Angular application: <div [ngClass]="verticalResultsBarStyle"> <div class="innerDiv"> <mat-card [ngClass]="barStyle" *ngFor="let card of obs | async | paginate: { id: 'paginato ...

cssangulartypescriptfrontend

Visualization with D3 - Putting an image at the heart of a circular chart made with SVG

Is it possible to add an image to the center of a donut SVG in D3 charts using JavaScript? I've been attempting to achieve this but haven't had any success so far. Currently, I have inserted the image in HTML, but it does not align with the cent ...

javascripthtmljsond3.js

The information overflow occurs outside the tooltip specifically in Chrome, while functioning perfectly in IE11

As a newcomer to the CSS world, I am experimenting with adding a block-level element (div) inside an anchor tag's :hover pseudo-class popup. The div element contains a table that needs to have dynamic sizing for both the table itself and its cells (wi ...

csstooltip

Only the main page is accessible quickly through Express

Currently, I am delving into learning Express and leveraging FS to load my HTML Page. My research on this topic only led me to references of using ASP.NET instead of Express. Here is a snippet from my Server.js file: var express = require('express&a ...

htmlnode.jsexpressfs

Having trouble with Bootstrap 5 sticky-top functionality within a container?

Why is my <nav> not sticking to the top of the viewport when scrolling, even though it has the .sticky-top class? <!doctype html> <html lang="en"> <head> <meta charset="utf-8> <meta name="viewport" content="wi ...

csstwitter-bootstrapbootstrap-5

Implementing dynamic classes for each level of ul li using JavaScript

Can anyone help me achieve the goal of assigning different classes to each ul li element in vanilla Javascript? I have attempted a solution using jQuery, but I need it done without using any libraries. Any assistance would be greatly appreciated! con ...

javascripthtmljquerytypescriptecmascript-6

Issue with the selected toggle menu

Whenever I click on a menu item's main div, its color changes. If I click again, the color remains the same. But now, I want the toggle menu to change its color when clicked, and then revert back to the color of the other parent divs when clicked agai ...

jqueryhtml

Is there a way to prevent additional text from shifting down when hovering over my Nav bar?

I need help with my navigation bar design. I have successfully implemented a hover effect that increases the text size on hover. However, when the text size changes, the other links shift down slightly and push the remaining links to the right (except the ...

htmlcssnavbar

The image in drag and drop ghost preview is not appearing on Firefox

I want to show a ghost element instead of the default browser preview while dragging and dropping. However, in Firefox, the image inside the ghost element is not displayed during dragging. Oddly enough, if I drop it and then drag again, the image does appe ...

javascripthtmlcssfirefoxdrag-and-drop

Mastering the art of seamless navigation within a single page through the magic of

I have two HTML pages: "Login.html" and "index.html". Instead of a normal href linking, I want the user to navigate to "index.html" when they click on the login button. Furthermore, I want the index page to be displayed within the codes of login.html, cre ...

javascriptjquerycsshtml

Stylish Interactive Menu Item

Having a fixed navigation at the bottom of my website has presented me with an issue. The hover effect, specifically the background slide, triggers before I even place my mouse over the text. Currently, the background slides up when my mouse enters the .it ...

htmlcssnavigation

What is the maximum number of files that FileUploader can accept when multi-select is enabled?

I encountered the following issue: A first chance exception of type 'System.Web.HttpException' occurred in System.Web.dll Additional information: Maximum request length exceeded. while attempting to upload 250 JPEG files, each around 98 KB in ...

c#asp.nethtml

Unexpected Display Issue with Angular Select Option

My goal is to implement the Select-Option Input as depicted in the first image link here: https://i.sstatic.net/SVT8R.png However, my current output looks different and I suspect that there may be a conflict between two CSS libraries. It's worth noti ...

cssangularbootstrap-4angular-materialbootstrap-5

Attaching a CSS file to a personalized WordPress widget

After much searching and struggling due to language barriers or lack of PHP knowledge, I couldn't figure out how to achieve this: public function widget( $args, $instance ) { ?> <div style="padding: 0 0 14% 0"> <div class="m ...

phphtmlcsswordpress

What is the best way to re-render a component immediately following an update in React?

As I attempt to change the color of a bar to green and then back to black, it seems like the latter color update is taking precedence in my code. const [color, setColor] = useState("black") const bubbleSort = async () => { const sleep = ms => ...

cssreactjsdomdom-events

Angular's responsiveness is enhanced by CSS Grid technology

I am attempting to integrate a CSS grid template that should function in the following manner: Columns with equal width 1st and 3rd rows - 2 columns 2nd row - 3 columns https://i.sstatic.net/aQyNR.png Order = [{ details:[ { ke ...

cssangulargridviewdatagridviewcolumn