Обрисуйте экран презентации больших данных с помощью самого короткого стиля CSS

внешний интерфейс визуализация данных анимация CSS ECharts

Сначала посмотрите на эффект дела, затем посмотрите на опыт и резюме

Некоторое время назад я создал демо-платформу и ввел любой номер мобильного телефона, чтобы отследить его местонахождение.Это похоже на эффект отслеживания Дина Ичжэня в «Во имя народа».Это, очевидно, секрет, поэтому я клонировал один специально и кастрировал бэкенд.Номер запроса жестко закодирован как мой номер, а данные заменены на статические:

Демонстрационный адрес (кастрированный бэкенд)

Адрес этой статьи на github будет постоянно обновляться...

Предварительный просмотр эффекта

↓↓↓ Обзор эффектов анимации: загрузка GIF занимает некоторое время ↓↓↓

Реализация общих эффектов (минимум кода)

Каким бы красивым ни был дизайн, его также можно разобрать на комбинацию базовых эффектов.Здесь я перечислил некоторые часто используемые эффекты и прилагаемые коды.

элегантная презентация

маскировать текст

Наложите маску и напишите текст на маске. Требуется 2 слоя, снизу вверх слой изображения и слой маски (выше можно написать)

<div class='box' >
	<div class='back'></div> <!--正文层-->
	<div class='modal'></div> <!--模板层-->
</div>
<style>
.box{
	position: relative;
	height: 200px; width: 300px
}
.back{
	background-image: url(http://www.imaoda.com/s/img/github/21.jpg);
	height: 100%; width: 100%;
}
.modal, .desc{
	position:absolute;
	height: 20%; width: 100%;
	bottom: 0; color: white
}
.modal{
	background: rgba(0,0,0,.5)
}
</style>

маска из матового стекла

Маска из матового стекла, по сути, является двухслойным изображением: нижнее изображение четкое и полное, верхнее изображение размыто и неполное, а смещение двух изображений абсолютно одинаково, поэтому при наложении оно выглядит как одно изображение. Чтобы обеспечить постоянное смещение, мы используемbackground : fixed, который может исправить фоновое изображение относительно браузера.

<div class='box'>
	<div class='blur-modal'></div>
	<div class='black-modal'> 描述文字 </div>
</div>
<style>
.box{
	position: relative; height:200px; width:300px;
	background: fixed url(http://www.imaoda.com/s/img/github/21.jpg);
}
.blur-modal{
	position: absolute; height:50px; width:300px;
	top: 150px;
	background: fixed url(http://www.imaoda.com/s/img/github/21.jpg);
	filter:blur(1rem)
}
.black-modal{
	position: absolute; height:50px; width:300px;
	top: 150px;
	background: rgba(0,0,0,.2);
	color: white
}
</style>

Размытие фона по Гауссу

Когда фильм был представлен, его фоновый цвет был похож на цвет постера, но на самом деле он увеличивал угол плаката + размытие по Гауссу + черная полупрозрачная маска.

<div class='suit' >
	<div class='figure'></div>
	<div class='modal'>
		功夫熊猫
	</div>
</div>
<style>
.suit{
	position: relative
}
.figure{
	background: url(http://www.imaoda.com/s/img/github/21.jpg);
	background-size: 200%;
	height: 200px; width: 400px;
	filter: blur(16px)
}
.modal{
	position: absolute;
	height: 200px; width: 400px; top: 0px; left: 0px; 
	background: rgba(0,0,0,.5);
	color: white; text-align: center
}
</style>

Еще один особый эффект фильтра — позволить изображению естественным образом переходить на фон по краям.

граница изображения

В прошлом использовались границы фона, вложенные элементы div, изображения использовались для внешнего фона, а внутренний слой был немного меньше и располагался по центру, но этот метод требует точного измерения. Более удобный способ — использовать border-image

<div class='back'><br> 运行状态监控 </div>
<style>
body{
	background: #003366;
}
.back{
	height: 180px;width: 400px;
	background: url(http://www.imaoda.com/s/img/tpl/content-frame1.png) no-repeat;
	background-size: contain; 
	background-position: center;
	color: white;
	text-align: center;
}
</style>

Технология смысла внутренней светящейся границы

Свечение в кадре может вызвать未来科技感(с анимацией еще лучше)

<div class='box'>
	数据总览
</div>
<style>
body{
	background: black;padding: 10px
}
.box{
	height: 20rem; width: 40rem; color:white; padding: 1rem;
	box-shadow: 0 0 3rem rgba(100,200,255,.5) inset;
	background: rgba(0,0,0,.3); 
}
</style>

Технологический смысл границы изображения

Выберите границы изображения, вы можете добиться большего количества эффектов, конечно, цена в том, что вам нужно сначала создать дизайн в PS

5% границы изображения определяет толщину границы

<div class='panel'>正常</div>
<br><br><br>
<div class='panel'>外发光</div>
<style>
.panel{
	height: 10rem; width: 20rem; color:rgba(255,255,255,.9);
	border: 20px solid transparent;
	border-image: url(http://www.imaoda.com/s/img/tpl/border.png) 5%;
	background:rgba(0,0,0,.3);
}
.panel:last-child{
	box-shadow:  0 0 5rem rgb(0,110,150)
}
</style>

Граница изображения технологического смысла 2

Это немного похоже на границу в игре, эффект немного более тяжелый

<style>
body{
	background: rgb(22,22,22); padding:10rem
}
.box{
    height: 10rem; width: 30rem;
    border: 1.5rem solid transparent;
    border-image: url(http://www.imaoda.com/s/img/tpl/border1.png) 15% 5%;
}
</style>

полупрозрачная панель

Технологии будущего в фантастических фильмах полностью прозрачны

В основном используйте градиент прозрачности, небольшое количество внутреннего света может усилить трехмерный эффект.

<div class='panel'>实时监控数据</div>
<style>
.body{
    background: url(http://www.imaoda.com/s/img/tpl/sky1.jpg); padding: 10rem
}
.panel{
	height: 12rem; width: 24rem; color:rgba(60,240,250,1); font-size: 1.5rem; padding:1rem;
	border-radius: .5rem;
	border: 1px solid rgba(0,180,220,0.5);
	background: linear-gradient(180deg,rgba(0,180,220,0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1),rgba(0,180,220,0.3));
	box-shadow: 0 0 2rem rgba(0,180,220,.1) inset
}
</style>

Стереоскопическая панель - с заголовком

  • Головка панели имеет верхний и нижний неглубокие переходы, а панель имеет полупрозрачный черный цвет.
  • Анимация бокового всплывающего окна лучше
<div class='panel'>
	<div class='panel-head'>用户行为分析</div>
	<div class='panel-body'></div>
</div>
<style>
.panel{
	display: flex; flex-flow: column nowrap;
	height: 23rem; width: 40rem;
	box-shadow: 0 0 1rem rgba(0,0,0,.5);
}
.panel-head{
	flex: 0 0 3rem; font-size: 1.5rem; color: rgba(255,255,255,.7); line-height: 3rem; text-align: center;
	background: linear-gradient(rgb(0,20,30), rgb(0,40,70));
	border: 2px solid rgba(0,90,120,.3);
	
}
.panel-body{
	flex: 1 0 auto;
	background: rgba(0,0,0,.3);
	border: 2px solid rgba(0,90,120,.4);
	border-top:none
}
.panel:hover{
	filter:brightness(1.2)
}
</style>

Угловая панель

  • Угловая этикетка и рамка одного цвета
  • Прямоугольники в разрезе используют преимущества линейно-градиентной прозрачности
<div class='panel' data-corner='New'></div>
<style>
body{
	padding: 10rem;background: rgba(0,0,0,.9)
}
.panel{
	height: 12rem; width: 24rem;
	border: 1px solid rgba(22,78,137,1);
	background: rgba(13,35,61,1);
	position: relative;
}
.panel::after{
	content: attr(data-corner);
	display: block; position: absolute; top: 0; right: 0; 
	width: 5rem; padding: 0 1rem; overflow: hidden; text-align: right; color: rgba(255,255,255,.9);
	background: linear-gradient(45deg,transparent 0% , transparent 30%,  rgba(22,78,137,1) 30%,  rgba(22,78,137,1) 100%)
}
</style>

карта экрана дуги

Используйте внутреннюю тень, чтобы выделить трехмерность и границы карты.

<div class='box'>
	<div class='card'></div>
</div>
<style>
.box{
	height: 406px; width: 206px; 
	background: linear-gradient(180deg,#116448,#116448);
	overflow: hidden;
	border: 1px solid rgba(0,0,0,.2);
	box-shadow: 0 0 1px black
}
.card{
	height: 400px; width: 200px; margin: 2px; border: 1px solid rgba(0,0,0,.2);
	box-shadow: 0 0 15px black inset;
	background: #009966;
}
</style>
</style>

Динамически вращающиеся границы

  • Два внешних кольца на рисунке расположены с абсолютным позиционированием, background-position: center центрирован, background-size регулируется, и добавляется анимация, чтобы заставить его двигаться.
  • Изображение задачи центрируется внешним гибким макетом
<div class='box'>
    <div class='ring-outer'></div>
    <div class='ring-inner'></div>
    <div class='avatar'></div>
</div>
<style>
.box{
  position: relative; width: 220px; height: 220px;
  display: flex; justify-content: center; align-items: center
}
.ring-inner{
  height: 220px; width: 220px; position: absolute;
  background: url(http://www.imaoda.com/s/img/tpl/ring-inner.png) no-repeat;
  background-size: 90%; background-position: center;
  animation: clockwise 3s linear infinite;
}
.ring-outer{
  height: 220px; width: 220px; position: absolute;
  background: url(http://www.imaoda.com/s/img/tpl/ring-outer.png) no-repeat;
  background-size: 100%;
  background-position: center;
  animation: anti-clockwise 3s linear infinite;
}
.avatar{
  height: 160px; width: 160px;
  background: url(http://www.imaoda.com/s/img/lessons/92.jpg);
  background-size: cover;
  border-radius: 50%
}
@keyframes clockwise{
  100%{
    transform: rotate(360deg)
  }
}
@keyframes anti-clockwise{
  0%{
    transform: rotate(360deg)
  }
}
</style>

элемент фона (коробка)

  • Внешний слой, несущий фон с соотношением сторон, подобным рисунку.
  • фоновое изображение с помощьюbackground-position: center; background-size: contain;Реализовать адаптивное центрирование размера
  • Внутренний слой используется для переноса содержимого, которое немного меньше, чем внешняя рамка, и центрируется за счет изгиба внешней рамки.
  • Сделать текст четким на разных фонах: белый текст с черным свечением, черный текст с белым свечением
<ul>
	<li> <div class='content'> 第一名 </div> </li>
	<li> <div class='content'> 第二名 </div> </li>
	<li> <div class='content'> 第三名 </div> </li>
</ul>
<style>
body{
	background: linear-gradient(0deg,#006666,#003333)
}
ul{
	margin: 20px 10px;
	display: flex
}
li{
	list-style: none; margin: 10px; height: 150px; width: 200px;
	background: url(http://www.imaoda.com/s/img/github/31.png) no-repeat;
	background-position: center; background-size: 100%;
	color: white; text-shadow: 0 0 2px #222222;
	display: flex; justify-content: center; align-items: center
}
.content{
	height: 80px; width: 120px;
}
</style>

Градиентная граница

Хотя используется border-image, фактически передается только linear-gradient

.box{
	height: 400px; width: 400px;
	border: 30px solid transparent;
	border-image: linear-gradient(45deg,red,blue) 10%
}

Вышеупомянутый метод не может достичь радиуса границы и может использовать двухслойный метод div, нижний градиентный слой и верхний слой содержимого. Недостатком является то, что размер необходимо измерять точно.

<div class='border'>
	<div class='content'></div>
</div>
<style>
.border{
	width: 300px; height: 600px; border-radius: 20px;
	background: linear-gradient(45deg,red,blue);
	overflow: hidden
}
.content{
	width: 260px; height: 560px;
	background: white;
	margin: 20px;
}
</style>

Боковая панель навигации Crystal

Здесь мы в основном делаем набор навигации слева, включающий следующие точки:

  • Белый текст с черными тенями, чтобы фон не был слишком белым
  • Униформа ul с правой границей (самый темный цвет rgb + 10, чем кнопка) и правой 1px # 222222 темно-серой тенью
  • li использует метод нижнего темного и верхнего яркого; после наведения он принимает более яркий левый и правый яркий
  • Шрифт тёмно-серый, а ховер белый с тенями
  • Схему яркости также можно использовать после наведения
  • Переход li должен показать эффект 3D, поэтому переход [темный, темный, светлый]
  • li:hover Чтобы выделить, эффект перехода [темный, яркий, яркий]
<style>
body{
	background: rgb(14,28,44)
}
ul {
	text-align: center; width: 6rem; color: darkgray;
	border-right:1px solid rgb(41,51,3); 
	box-shadow: 1px 0 0px #222222 ; 
}
li {
	list-style: none; font-size: 2rem; 
	border-top:1px solid rgb(91,101,123);
	background: linear-gradient(180deg,rgb(51,61,83),rgb(31,41,63),rgb(31,41,63));
}
li:hover{
	background: linear-gradient(90deg,rgb(34,54,86),rgb(36,171,232) ,rgb(36,171,232));
	color: white;
	text-shadow: 1px 1px 1px black
}
</style>

наведение перемещает боковую панель навигации

Внутреннее свечение может придать людям ощущение приподнятости. Этот эффект также можно использовать, когда меню выделено. Однако пока светятся верхняя и нижняя стороны (достигается с помощью градиентного фона).

Градиент использует 180, яркую и темную, а яркую часть трехканальной яркости можно увеличить на 20.

<style>
li{
	height: 3rem; width:10rem; line-height: 3rem; 
	color: rgba(255,255,255,.8); cursor: pointer; list-style: none; 
	padding-left: 1rem;
	background: rgb(8,21,37);
	border-bottom: 3px solid rgba(0,0,0,.5);
	transition: margin-left .5s;
}
li:last-child{
	border: none
}
li:hover{
	background: linear-gradient(180deg,rgb(28,41,57),rgb(8,21,37),rgb(8,21,37),rgb(28,41,57));
	margin-left: 2rem;
}
</style>

Эффект нажатия кнопки стерео

До нажатия кнопка плавает и имеет тень, после нажатия кнопка опускается, тень исчезает, а громкость уменьшается (дальше от поля зрения)

.box{
	height: 100px; width: 300px; background: green; margin: 2rem;
	box-shadow: 0 0 1rem gray;
	cursor: pointer;
	transition: all .3s;
	border-radius: 50px;
}
.box:active{
	box-shadow: 0 0 0px gray; transform: scale(0.99)
}

Переход металлической текстуры

Угол 45 градусов, глубокий с обеих сторон, мелкий посередине

.box{
	height: 3rem; width: 5rem;
	border-radius: 1rem;
	background: linear-gradient(45deg, rgb(31,89,146),rgb(35,175,230),rgb(29,136,203) )
}

Так что вам нужно тщательно продумать переход кнопки.При нажатии кнопки вы можете изменить внешнюю тень на внутреннюю тень и масштаб (0,95). С переходом .1с эффект лучше

<style>
.box{
	height: 3rem; width: 3rem; 
	line-height: 2.8rem; text-align: center; 
	color: white; 
	text-shadow: 1px 1px 5px black;
	font-weight: bold;
	font-size: 2rem;
	border-radius: .5rem;
	background: linear-gradient(225deg, rgb(31,89,146),rgb(31,89,146) 10% ,rgb(35,175,230) 60%,rgb(35,175,230) 70%,rgb(29,136,203) );
	box-shadow: 0 0 5px black
}
.box:hover{
	box-shadow: 0 0 5px gray inset;
	transform: scale(.95)
}
</style>

полоса прогресса текстуры

Индикатор выполнения должен быть ярким в середине и темным с обеих сторон, чтобы он выглядел круглым и выпуклым, а контейнер индикатора выполнения должен иметь внутреннюю тень, чтобы показать вогнутое ощущение.

<div class='box'>
	<div class='progress'></div>
</div>
<style>
.box{
	height: 2rem; width: 30rem; 
	box-shadow: 0 0 5px white inset;
	border: 1px solid black;
	background:#003366
}
.progress{
	width: 1rem;
	height: 2rem;
	background: linear-gradient(180deg, #00CCCC,#00CCCC,#009999);
	transition: all 3s;
	box-shadow: 0 0px 5px white
}
.box:hover .progress{
	width: 30rem
}
</style>

золотой сюрприз шрифт

.box{
	color: rgb(253,219,94); font-size: 3rem; 
	text-shadow: 1px 2px 2px black
}

разделительная линия

Иногда нашим границам нужна только разделительная линия, и цвет не должен быть слишком бросающимся в глаза.

  • Вы можете напрямую использовать границу с одной стороны
  • Цвет границы черный, но непрозрачность всего 0,2 (для растворения в базовом цвете)
<ul>
	<li> 第一名 </li>
	<li> 第二名 </li>
	<li> 第三名 </li>
</ul>
<style>
body{
	background: linear-gradient(0deg,#006666,#003333)
}
ul{
	margin: 20px 10px;
	display: flex
}
li{
	list-style: none; width: 100px; line-height: 40px; color: white; text-align: center;
	border-right: 2px solid rgba(255,255,255,.2);
}
</style>

Короткая вертикальная полоса перед списком

  • Используйте псевдокласс, прежде чем добавить дочерний элемент в заголовок
  • Этот дочерний элемент расположен в виде встроенного блока, а его размер измеряется в em.
<div class='title'>
	用户数据
</div>	
<style>
body{
	background: linear-gradient(0deg,#006666,#003333)
}
.title{
	font-size: 2rem; line-height: 5rem; color: white
}
.title::before{
	content: '';
	display: inline-block;
	width: .2em; background: yellow; 
	height: .8em; margin-right: .5em;
}
</style>

цвет текста

Цвет текста чисто белый и чисто черный, что слишком бросается в глаза и резко. Обычно мы выбираем «не такой уж белый» или «не такой уж черный» цвет, чтобы сделать текст мягче. Если вам сложно выбрать цвет, вы можете использовать чистый черный или чистый белый, добавить прозрачность и смешать с фоном, сделав его более мягким.

rgba(255,255,255,.9)

быстрый эффект

Основные моменты области

Выделение области обычно используется для выделения выбора пользователя. Распространенными методами являются следующие:

  • Измените цвет фона RGBA и увеличьте количество каждого компонента (или компонента A, чтобы настроить прозрачность фона) || Измените значение фильтра: яркость
  • Рассмотрите возможность использования transfrom: scale(1.1) для увеличения и& для добавления тени.
  • Добавьте очень небольшое количество перехода, чтобы усилить эффект перехода

область тусклый

Затемните некоторые области, уменьшите внимание пользователя, например, завершенные или разблокированные:

  • Измените цвет фона RGBA, умеренно уменьшите каждый компонент || Изменить фильтр: яркость
  • Абсолютно определите черную полупрозрачную маску (чтобы блокировать клики) и поместите ее на нее.Вы можете использовать полупрозрачность + размытие по Гауссу для усиления эффекта и реализовать (attr) пакетные настройки через псевдокласс after/before.

вращающийся световой эффект

Если есть готовый ПС для улучшения света, то младшая версия способа производства света:

  1. Создайте треугольник в ppt, выберите линейный переход, верхний желтый, нижний желтый прозрачный
  2. Продублируйте треугольник на 8 частей, затем продублируйте n 8 и поверните их в лучи.

Вращающийся свет использует 2 элемента,animation:my 5s linear 0s infinite,transform:rotate(360deg). Динамически изменяйте продолжительность анимации, например, изменяя на 2 секунды, вы можете добиться ускорения вращения

<div class='box'>
	<img class='light' src="http://www.imaoda.com/s/img/tpl/light.png" alt="">
	<div class='btn'>开始</div>
</div>
<style>
body{
	background: rgb(14,28,44)
}
.box{
	position: relative; height: 400px; width: 400px; 
	display: flex; justify-content: center; align-items: center;
}
.light{
	width: 200px; height: 200px;	
	filter: drop-shadow(0 0 5px yellow);
	animation: rotate linear 3s infinite;
}
.btn{
	position: absolute; 
	top: 50%; left: 50%; transform: translate(-50%,-50%); padding:3rem;
	background:green; color: white; border-radius: 50%;
}
@keyframes rotate{
	100%{
		transform: rotate(360deg)
	}
}
  • Световой элемент позиционируется статично, а flex центрируется.Если он центрируется с помощью top/left+translate, он конфликтует с вращением rotate
  • Элементы кнопки позиционируются с абсолютным, верхним/левым + переводом по центру (поскольку абсолютные элементы не контролируются flex)

эффект прожектора

Анимация излучающей круглой границы, постепенно сужающейся:

  • Внешний слой имеет фиксированный размер, а внутренний слой абсолютно центрирован с помощью гибкой компоновки.
  • Анимация длины и ширины
  • border-radius: фиксированный процент 50%, держите круг
<div class='box'>
	<div class='circle'></div>
	<div class='btn'>开始</div>
</div>
<style>
.box{
	position: relative;
	height: 300px; width: 300px;
	display: flex; justify-content: center; align-items: center;
}
.circle{
	height: 200px; width: 200px;
	border-radius: 50%;
	border: 10px solid yellow;
	filter: drop-shadow(0 0 10px white);
	animation: shrink 1s infinite;
}
.btn{
	position: absolute; 
	top: 50%; left: 50%; transform: translate(-50%,-50%); padding:3rem;
	background:green; color: white; border-radius: 50%;
}
@keyframes shrink{
	100%{
		height: 10px; width: 10px;
	}
}
</style>

Подсказка яркого окна

Когда пользователь щелкает или наводит курсор, граница выделяется и подсвечивается, чтобы играть роль подсказки.

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
<style>
li{
	display: inline-block; height: 200px; width: 150px;
	background: url(http://www.imaoda.com/s/img/github/sgs.jpg);
	background-size: 100%;
	box-shadow: 0 2px 2px #222222;
	border: 2px solid transparent;
	border-radius: 5px;
	filter: brightness(.7);
	cursor: pointer;
	transition: all .2s
}
li:hover{
	box-shadow: 0 0 30px yellow;
	border: 2px solid yellow;
	transform: translate(0,-10%);
	filter: brightness(1);
}
</style>

Наконец, закрепите базовые знания

цвет RGBA

Вы можете добавить прозрачность 0 для полной прозрачности и 1 для полной непрозрачности за обычными цветами RGB. Доступно в:

  • color
  • background
  • gradient
  • box-shadow
  • text-shadow
rgba(123,222,22,.5)

Градиент

Линейный градиент: угол, цвет 1, цвет 2, ..., цвет n. Вы можете добавить % после него, если он опущен, он будет разделен поровну

linear-gradient(45deg,rgba(0,0,255,.1) 0%,rgba(0,255,0,.1) 90%,rgba(255,0,0,.6) 100%)

Сияющий градиент: цвет 1, цвет 2, ..., цвет n. Вы можете добавить % после него, если он опущен, он будет разделен поровну

linear-gradient(rgba(0,0,255,.1) 0%,rgba(0,255,0,.1) 90%,rgba(255,0,0,.6) 100%)

фильтр фильтр

filter будет фильтровать все содержимое текущего элемента (включая подэлементы, включая графические границы и т. д.). Если вы хотите фильтровать только изображения, вам нужно использовать position для размещения текстового элемента над ним.

<!--滤镜可以叠加：先模糊，再灰度-->
filter: blur(.1rem) grayscale(.5);

Общие фильтры включают в себя:

  • Размытие: Размытие по Гауссу в смысле расфокусировки, по умолчанию 0rem
  • непрозрачность: прозрачность, по умолчанию 1, полная прозрачность 0
  • яркость: яркость, по умолчанию 1, полный черный 0, передержка 2+
  • насыщенность: насыщенность, по умолчанию 1, серый 0, яркий 2+
  • контрастность: контрастность, по умолчанию 1, полностью серый 0, черно-белый 2+
  • оттенки серого: наложение оттенков серого, по умолчанию 0, оттенки серого 1
  • сепия: наложенный коричневый, по умолчанию 0, коричневый 1
  • Invert: Invert Color, по умолчанию 0, полный серый 0,5, инвертировать цвет 1
  • Drop-Shadow: Box-Shadow в прозрачной области Без тени

граница изображения границы изображения

В прошлом для достижения эффекта рамки-изображения необходимо было использовать в качестве основы изображение немного большего размера.

border: 30px solid transparent;
border-image: url(b.png) 10%;

фиксированный фон с прикрепленным фоном

Если это исправлено, фон не следует за прокруткой прокрутки

background-blend-mode

умножить умножить

Закругленная прямоугольная часть

Радиус границы можно установить отдельно для верхнего левого, верхнего правого, нижнего правого и нижнего левого. Поэтому можно задать частично скругленный прямоугольник

.box{
height: 400px; width: 400px; background: green;
border-radius: 0 2rem 0 2rem 
}

Вещество Тень/Свечение

box-shadow может установить правильную тень, нижнюю тень, размытие по Гауссу, цвет. Среди них тень сплошного цвета, а наслоение немного сильнее.Как правило, вы можете добавить размытие. Размытие распространяется в четырех направлениях, причем

.box{
height: 400px; width: 400px; background: black; margin: 2rem; padding: 2rem; color: lightgreen; font-size: 28px;
box-shadow: 0 0 1rem gray;
}

Суть люминесценции и тени та же, но цвет светлый (белый/желтый и т.д.), окружение темное, а эффект радиуса границы более естественный

内阴影, может подчеркнуть чувство депрессии, просто добавьте в конце box-shadowinsetКлючевые слова

Излучающий / черный ящик для шрифта

text-shadow, просто размытие, белый свет делает шрифт светящимся, черный свет заставляет белый шрифт вписаться в фон изображения

.box{
	height: 400px; width: 400px; background: black; margin: 2rem; padding: 2rem; color: lightgreen; font-size: 28px;
	text-shadow: 0 0 .5rem yellow
}

Адрес этой статьи на github будет постоянно обновляться...

Категории