// 内凹圆角
@mixin sunken-radius($c, $s, $b, $a: "") {
&::before,
&::after {
content: " ";
display: block;
position: absolute;
width: $s + "px";
height: $s + "px";
background-repeat: no-repeat;
}
%tl1 {
left: 0;
top: -$s + "px";
background-image: radial-gradient(
circle at $s 0,
transparent $s - 1,
$c $s
);
}
%tl2 {
left: 0;
top: 0;
background-image: radial-gradient(
circle at $s $s,
transparent $s - 1,
$c $s
);
}
%tl3 {
left: -$s + "px";
top: 0;
background-image: radial-gradient(
circle at 0 $s,
transparent $s - 1,
$c $s
);
}
%tr0 {
right: 0;
top: -$s + "px";
background-image: radial-gradient(
circle at 0 0,
transparent $s - 1,
$c $s
);
}
%tr2 {
right: -$s + "px";
top: 0;
background-image: radial-gradient(
circle at $s $s,
transparent $s - 1,
$c $s
);
}
%tr3 {
right: 0;
top: 0;
background-image: radial-gradient(
circle at 0 $s,
transparent $s - 1,
$c $s
);
}
%br0 {
right: 0;
bottom: 0;
background-image: radial-gradient(
circle at 0 0,
transparent $s - 1,
$c $s
);
}
%br1 {
right: -$s + "px";
bottom: 0;
background-image: radial-gradient(
circle at $s 0,
transparent $s - 1,
$c $s
);
}
%br3 {
right: -$s + "px";
bottom: 0;
background-image: radial-gradient(
circle at $s 0,
transparent $s - 1,
$c $s
);
}
%bl0 {
left: -$s + "px";
bottom: 0;
background-image: radial-gradient(
circle at 0 0,
transparent $s - 1,
$c $s
);
}
%bl1 {
left: 0;
bottom: 0;
background-image: radial-gradient(
circle at $s 0,
transparent $s - 1,
$c $s
);
}
%bl2 {
left: 0;
bottom: -$s + "px";
background-image: radial-gradient(
circle at $s $s,
transparent $s - 1,
$c $s
);
}
@if $b == "tl1" {
&::before {
@extend %tl1;
}
} @else if $b == "tl2" {
&::before {
@extend %tl2;
}
} @else if $b == "tl3" {
&::before {
@extend %tl3;
}
} @else if $b == "tr0" {
&::before {
@extend %tr0;
}
} @else if $b == "tr2" {
&::before {
@extend %tr2;
}
} @else if $b == "tr3" {
&::before {
@extend %tr3;
}
} @else if $b == "br0" {
&::before {
@extend %br0;
}
} @else if $b == "br1" {
&::before {
@extend %br1;
}
} @else if $b == "br3" {
&::before {
@extend %br3;
}
} @else if $b == "bl0" {
&::before {
@extend %bl0;
}
} @else if $b == "bl1" {
&::before {
@extend %bl1;
}
} @else if $b == "bl2" {
&::before {
@extend %bl2;
}
}
@if $a != "" {
@if $a == "tl1" {
&::after {
@extend %tl1;
}
} @else if $a == "tl2" {
&::after {
@extend %tl2;
}
} @else if $a == "tl3" {
&::after {
@extend %tl3;
}
} @else if $a == "tr0" {
&::after {
@extend %tr0;
}
} @else if $a == "tr2" {
&::after {
@extend %tr2;
}
} @else if $a == "tr3" {
&::after {
@extend %tr3;
}
} @else if $a == "br0" {
&::after {
@extend %br0;
}
} @else if $a == "br1" {
&::after {
@extend %br1;
}
} @else if $a == "br3" {
&::after {
@extend %br3;
}
} @else if $a == "bl0" {
&::after {
@extend %bl0;
}
} @else if $a == "bl1" {
&::after {
@extend %bl1;
}
} @else if $a == "bl2" {
&::after {
@extend %bl2;
}
}
}
}
制作内凹圆角用的,四个角,每个角有三种圆角状态,但代码好长,有办法优化吗?