Question

我想将不同的border-radius应用于box-shadow和div（应用了框阴影）。想要做这样的事情。 https://www.screencast.com/t/mEjBxMnbt

我制作div并应用box-shadow然后将border-radius:1px 0 0 1px应用于div，它给出了box shadow的半径，这很好，但是我想给我的div更多的border-radius而不改变我的盒子 - 阴影半径。只能在div上应用css，不能将其包装起来或者使用父容器。

请参阅链接以获取更多理解。

试过这远远

https://codepen.io/naveen_dharni/pen/Kqdyer

Answer 1

hi border radius影响div元素的box shadow .. 你可以使用伪元素

做这样的事情

HTML

<div></div>

CSS

div
{
  top:50px;
  height:300px;
  width:300px;
  border: 3px solid #000;
  box-shadow: 0 0 0 18px #DCD7E3;
  border-radius: 1px 0 0 1px;
  border-radius:500px;
  position: relative;
  margin:auto;
}

div::after
{
  content:"";
  position: absolute;
  top:0;
  left:-50%;
  right:-50%;
  bottom:0;
  margin:auto;
  display:inline-block;
  height:120%;
  width:120%;
  background-color: red;
  z-index:-1;
  border-radius:20px;
}

以下是参考codepen link

的链接

希望这有效..

Answer 2

重叠多个阴影可以解决您的问题吗？

＆＃13;

body
{
  background-color:pink;
  padding-left:20px;
}
div
{
    display:inline-block;
    margin-top:30px;
    margin-right:10px;
    margin-left:8px;
    height: 100px;
    width: 100px;
    border: 3px solid black;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 
      -27px -27px 0 -9px blue,
      -27px 27px 0 -9px blue,
      -9px -9px 0 9px blue,
       -9px 9px 0 9px blue,
       9px -9px 0 9px blue,
       9px 9px 0 9px blue;
	  border-radius: 10px;
}
div:first-child {
  box-shadow:
      -9px -9px 0 9px blue,
       -9px 9px 0 9px blue,
       9px -9px 0 9px blue,
       9px 9px 0 9px blue;
}

＆＃13;

<div></div><!-- no space between inline-blocks to make gaps predictable
--><div></div><!--
--><div></div><!--
--><div></div>

＆＃13;

与阴影和div不同的半径

2 个答案: