不同的半径到盒子阴影和div

Question

我想对盒子阴影和div(应用盒子阴影)应用不同的border-radius。想做这样的东西。 https://www.screencast.com/t/mEjBxMnbt

我制作div 并应用框阴影，然后将border-radius:1px 0 0 1px应用于div，这会给box shadow半径，这很好，但我想在不改变我的框阴影半径的情况下为我的div 提供更多的边框半径。只能在div 上应用 css 无法包装它或为其获取父容器。

请参阅链接以了解更多理解。

试过这个很远

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

Answer 1

你的问题不能用重叠的多个阴影来解决吗？

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;
}

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

Answer 2

hi 边框半径会影响div 元素的框阴影。 您可以使用伪元素执行类似操作

.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;
}

这是参考代码笔链接的链接

希望这有效..