интересный радиус границы

CSS

Введение в радиус границы на MDN

  • one,two,three,or four <length> or <percentage> values. This is used to set a single radius for the coners.
  • followed optionally by "/" and one, two, three, or four <length> or <percentage> values. This is used to set an additional radius, so you can have elliptical corners.

Пожалуйста, прикрепите ссылку, пожалуйстакликните сюда

Копаем глубже в border-radius

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

Сначала посмотрите на эффект (предупреждение о нескольких изображениях):

效果一

效果二

效果三

效果四

效果五

Вот несколько классных кнопок (предупреждение о большой картинке):

按钮一

按钮二

按钮三

按钮四

Эти четыре кнопки используют не только border-radius, но и box-shadow и linear-gradient.

Краткий обзор восьми значений border-radius

/* 除了长度单位还可以用%表示 */
border-radius: 10px/20px;
border-radius: 10px 20px/20px 10px;
border-radius: 10px 20px 30px/30px 20px 10px;
border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;

принцип реализации

Следующий рисунок является примером

例图

код показывает, как показано ниже

border-radius: 100px/50px;

Всем должно быть понятно, что приведенный выше код также является сокращенной формой, а полная форма должна быть такой:

border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;

Давайте кратко проанализируем приведенный выше код. Левая сторона «/» указывает горизонтальный радиус верхнего левого, верхнего правого, нижнего правого и нижнего левого углов, а правая сторона «/» указывает вертикальный радиус верхнего левого, верхнего правого, нижнего правого, и нижние левые углы.

Так как четыре угла похожи, то возьмем для примера верхний левый угол.Схема-схема такая (рисунок немного некрасивый, никак, есть проблема с эстетикой, как нарисовать и изменить цвет не может заставить его выглядеть хорошо...):

原理图

Мы используем эллипс с горизонтальным радиусом 100 пикселей (желтая линия в верхнем левом эллипсе) и вертикальным радиусом 50 пикселей (красная линия в верхнем левом эллипсе) вплотную к верхнему левому углу (верхняя часть эллипса плотно прилегает к верхней части прямоугольника, а правая часть эллипса плотно прилегает к правой части прямоугольника). Лишняя область верхнего левого прямоугольника будет обрезана. Это чтобы обрезать один угол.Если вы обрежете четыре угла, это будет выглядеть как на картинке выше.

простое упражнение

  • я не знаю как это называется
    练习题一图

код показывает, как показано ниже:

border-radius: 100% 50%/0 100%;
  • лист

练习题二图
код показывает, как показано ниже:

border-radius: 0 100%/0 100%;
  • наклонный эллипс

练习题三图
код показывает, как показано ниже:

border-radius: 100% 50%/100% 50%;
  • скрученная фоторамка

练习题四图
код показывает, как показано ниже:

border-radius: 150px 400px 150px 400px/400px 150px 400px 150px;

крутое упражнение на кнопку

酷炫按钮练习题一图
Код выглядит следующим образом (с градиентами и тенями):

background: linear-gradient(to bottom,#FBBCD0,#FBAAC3);
box-shadow: 0 10px 10px #B9174C;
border-radius: 150px 14px/150px 14px;

酷炫按钮练习题二图
Код выглядит следующим образом (с градиентами и тенями):

background: linear-gradient(to bottom,#E8F6D9,#BEE595);
box-shadow: 0 10px 10px #4F821D;
border-radius: 50px/100px;

酷炫按钮练习题三图
Код выглядит следующим образом (с градиентами и тенями):

background: linear-gradient(to bottom,#D7EAFD,#A3C7E8);
box-shadow: 0 10px 10px #4179AB;
border-radius: 50px 50px 20px 20px/200px 200px 20px 20px;

酷炫按钮练习题四图
Код выглядит следующим образом (с градиентами и тенями):

background: linear-gradient(to bottom,#FDE0AF,#E4B260);
border-radius: 15px 15px 50% 50%/15px 15px 100% 100%;
box-shadow: 0 10px 10px #986206;

Суммировать

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

дополнительный урожай

Когда я изучал радиус границы, я действительно научился использовать DIV для моделирования трапеций, В обучении везде есть сюрпризы!

梯形

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

height: 0;
width: 400px;
border-bottom: 200px solid lightgreen;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
/* 
    实现梯形实际是相当于在实现三角形的基础上(width=0)更改width。
    这里实现的是等腰梯形。若想实现非等腰梯形，可以让左右边框的宽度不相等。
*/

Не по теме

Это мой первый блог о Наггетс, также размещенный наGitHubначальство. Там может быть много неуместности, и каждый может критиковать и давать советы. я изучал вчера вечером border-radius и при написании этого блога я ссылался на блоги некоторых других людей, но ни один из их блогов не взят из первоисточника, они должны быть репостированы другими, а ссылки на первоисточник нет. Поэтому я не буду включать эти ссылки здесь.

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

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

Категории