Принцип действия
В основном используйте градиент css для создания некоторых фоновых полостей, которые не нужно вырезать.
стиль купона
.mixinsTicket(@width, @height, @r, @left, @lcolor, @rcolor) {
width: @width;
height: @height;
background:
radial-gradient(circle at top right, transparent @r, @lcolor 0) -(@width - @left) top ~'/' 100% 51% no-repeat,
radial-gradient(circle at bottom right, transparent @r, @lcolor 0) -(@width - @left) bottom ~'/' 100% 51% no-repeat,
radial-gradient(circle at top left, transparent @r, @rcolor 0) @left 0 ~'/' 100% 51% no-repeat,
radial-gradient(circle at bottom left, transparent @r, @rcolor 0) @left bottom ~'/' 100% 51% no-repeat;
}
.mixinsTicket1(@width, @height, @r, @top, @color) {
width: @width;
height: @height;
background:
radial-gradient(circle at bottom left, transparent @r, @color 0) left (@top - @height) ~'/' 51% 100% no-repeat,
radial-gradient(circle at top left, transparent @r, @color 0) left @top ~'/' 51% 100% no-repeat,
radial-gradient(circle at bottom right, transparent @r, @color 0) right (@top - @height) ~'/' 51% 100% no-repeat,
radial-gradient(circle at top right, transparent @r, @color 0) right @top ~'/' 51% 100% no-repeat;
&::after{
content: '';
display: block;
position: absolute;
width: calc(100% - 2 * @r);
left: @r;
top: @top;
border-top: 1px dashed #fff;
transform: translateY(.5);
}
}
Эффект фаски
.mixinFlag(@width, @height, @bg) when(default()) {
width: @width;
height: @height;
background:
linear-gradient(45deg, transparent sqrt(pow(@width/2, 2)/2), @bg 0) right,
linear-gradient(-45deg, transparent sqrt(pow(@width/2, 2)/2), @bg 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
}
.mixinFlag(@width, @height, @bg) when(@width > @height) {
width: @width;
height: @height;
background:
linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) top left,
linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) bottom left;
background-size: 100% 50%;
background-repeat: no-repeat;
}
.mixinsMark(@width, @height, @bg) {
width: @width;
height: @height;
background:
linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) bottom left,
linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) top left;
background-size: 100% 50%;
background-repeat: no-repeat;
}
PS: Вышеуказанные эффекты могут быть достигнуты во всех четырех направлениях, коды других направлений не публикуются, принцип тот же.
Плед
css {
width: 510px;
height: 128px;
background: #FFF;
background-image: linear-gradient(rgba(182, 128, 102, .8) 8px, transparent 0),
linear-gradient(90deg, rgba(182, 128, 102, .8) 8px, transparent 0);
background-size: 8px 14px, 14px 8px;
}
фокус
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background:
radial-gradient(closest-side at 50% 278rpx, transparent 140rpx, rgba(0, 0, 0, .12) 180rpx, rgba(0, 0, 0, .22) 200rpx, rgba(0,0,0,.3) 220rpx, rgba(0,0,0, .4)) no-repeat;
}
Суммировать
Каждый слой градиента можно использовать в качестве фонового изображения, а это значит, что для каждого слоя градиента можно указать свое положение, размер и повторение. Учащиеся, которые играли в PS, должны знать концепцию слоев.Наш принцип наложения фоновых изображений аналогичен (конечно, градиенты также могут использоваться в качестве фоновых изображений), контролируя размер градиента, где его выдолбить и где отобразить, будь то мозаичное или нет, вы можете добиться основных эффектов в большинстве сценариев.Конечно, фрагмент будет получен быстрее, но иногда фрагменты не могут адаптироваться ко всем сценариям.
Овладение порядком написания фона может помочь вам представить желаемый эффект в уме:
background: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip
Справочная литература
- «Секреты CSS» — книга, написанная сестрой CSS.
Более
Надеюсь помочь нуждающимся