我试图在重叠背景时创建具有两种不同颜色的偏移边框。我习惯用矩形或圆形来做,但这是椭圆形和矩形的混合。
这是我的尝试:
.square {
height: 300px;
width: 200px;
background-color: black;
border-radius: 500px 500px 0px 0px;
border-color: black white white black;
border: 0px solid transparent;
content:"";
}
.square::after {
content: " ";
position: absolute;
transform: translate3d(10px, 10px, 0);
height: 300px;
width: 200px;
border: 3px solid;
/* border-color: white black black white;*/
box-shadow: white 3px 3px 0px inset;
box-sizing: border-box;
border-radius: 500px 500px 0px 0px;
}
<div class="square"></div>
我用渐变和盒阴影进行了测试,但没有结果。请注意,我已经阅读了 W3C 规则,但我需要改进它,因为左下角做得不好。
正如你在下一张图片中看到的(这确实是我想要的)左下边框不同,右上边框也不同(具有相同的宽度)
这些是我的其他尝试(请查看整页)。第一个例子很好,但我无法更改与背景重叠的颜色。我希望这个问题被问得很好。
*,
::before {
box-sizing: inherit;
margin: 0;
}
html {
font: 100 1.25em/1.25 handlee, z003, segoe script, comic sans ms, cursive;
}
@media (max-width: 360px) {
html {
font-size: 1em;
}
}
@media (max-width: 240px) {
html {
font-size: 0.75em;
}
}
body {
box-sizing: border-box;
display: grid;
grid-gap: 1.25em;
grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
overflow-x: hidden;
padding: 0.5em;
min-height: 100vh;
}
@media (min-width: 37.8125em) {
body {
}
}
article {
--c: #ffa940;
--s0: calc(1.25em + 6px);
--s1: calc(1.25em + 6px + 0.5em);
place-self: center;
position: relative;
width: 12em;
height: 14em;
border: solid 4px var(--s0);
border-width: 0 var(--s0) var(--s0) 0;
padding: var(--s1) 0.5em 0.5em var(--s1);
background: var(--c) padding-box;
}
article {
border-top-right-radius: 50%;
border-top-left-radius: 50%;
}
article::before {
position: absolute;
top: -40px;
left: -60px;
border: inherit;
border-width: 1.25em 0 0 1.25em;
width: 12em;
height: 14em;
box-shadow: inset 0 0 0 6px var(--c);
mix-blend-mode: difference;
pointer-events: none;
content: "";
border-top-right-radius: 50%;
border-top-left-radius: 50%;
}
h3 {
font-size: 1.5em;
font-weight: 900;
line-height: 1.75;
}
.container {
width: 200px;
height: 300px;
background: #ffa940;
border-top-left-radius: 400px;
border-top-right-radius: 400px;
transform: translateY(10px);
}
.container:after {
width:12px;
height: 3px;
background-color: black;
position:absolute;
content:"";
top:284px;
left:-13px
}
.container:before {
content: "";
border: 4px solid;
border-bottom-color: white;
border-left-color: black;
border-top-left-color: black;
border-right-color: white;
/* border-top-color: white;*/
border-top-left-radius: 400px;
border-top-right-radius: 400px;
width: 200px;
height: 300px;
position: absolute;
left: -13px;
top: -13px;
}
.white-grad {
--b:5px; /* border width*/
color: #313149;
display: inline-block;
margin: 10px;
width: 200px;
height:250px;
/* aspect-ratio: 1;*/
position: relative;
z-index: 0;
left:500px;
background: red;
border-radius: var(--r,50%);
}
.white-grad:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
padding: var(--b);
border-radius: var(--r,50%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
left: -20px;
margin-top: -20px;
margin-bottom: 20px;
margin-right: 20px;
}
<article> </article>
<dic class=" container"> </div>
<div class="white-grad" style="--b:4px;--r:5em 5em 0 0;--c:linear-gradient(-56.03deg,white 49.5%,black 0)"></div>
谢谢
我已经解决了。有一个简单的方法太简单了,只需使用 z-index 即可:
*,
::before {
box-sizing: inherit;
margin: 0;
}
html {
font: 100 1.25em/1.25 handlee, z003, segoe script, comic sans ms, cursive;
}
@media (max-width: 360px) {
html {
font-size: 1em;
}
}
@media (max-width: 240px) {
html {
font-size: 0.75em;
}
}
body {
box-sizing: border-box;
display: grid;
grid-gap: 1.25em;
grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
overflow-x: hidden;
padding: 0.5em;
min-height: 100vh;
}
@media (min-width: 37.8125em) {
body {
}
}
article {
--c: #ffa940;
--s0: calc(1.25em + 6px);
--s1: calc(1.25em + 6px + 0.5em);
place-self: center;
position: relative;
width: 12em;
height: 14em;
border: solid 4px var(--s0);
border-width: 0 var(--s0) var(--s0) 0;
padding: var(--s1) 0.5em 0.5em var(--s1);
background: var(--c) padding-box;
}
article {
border-top-right-radius: 50%;
border-top-left-radius: 50%;
overflow: hidden;
}
article::before {
position: absolute;
top: -40px;
left: -60px;
border: 4px solid white;
width: 12em;
height: 14em;
pointer-events: none;
content: "";
border-top-right-radius: 50%;
border-top-left-radius: 50%;
}
.bottom{
z-index:-2;
position: absolute;
top: 59px;
left: 235px;
border: 4px solid black;
width: 12em;
height: 13.2em;
pointer-events: none;
content: "";
border-top-right-radius: 50%;
border-top-left-radius: 50%;
}
<article></article>
<div class="bottom"></div>
请注意,由于渲染不同,我更改了代码片段中的左侧和顶部值。可以轻松更改以达到更好的效果。我在桌面上的正确值是: top: 59px; 左:300px;
(我不知道为什么当我发布它时片段是不同的。当我插入它时它似乎是正确的。)