Рамки и границы
Содержание:
- Картинная рамка 2:
- Настройки рамки
- Создать рамку с помощью специальных инструментов Word
- Создание рамки с помощью таблицы
- Box 9
- Рамка таблицы
- CSS Advanced
- Как в Ворде сделать рамку вокруг страницы
- Как сделать рамку border только с одного края (границы)
- Как в Ворде сделать рамку
- Как сделать рамку в Word вокруг абзаца
- Рамки через box-shadow
- Box 4
- Нарезка изображения
Картинная рамка 2:
Текст
<div class=»corner-box-8″>
<div class=»corner-textbox-8″>
Текст
</div>
</div>
|
1 |
<div class=»corner-box-8″> <div class=»corner-textbox-8″> Текст </div> </div> |
.corner-box-8 {
position: relative;
box-shadow: 20px 20px 36px rgba(0,0,0,0.2);
border: 11px solid #ededed;
width: 300px;
padding: 20px;
margin: 30px;
text-align: center;
display: inline-block;
}
.corner-textbox-8:before {
content: » «;
position: absolute;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
box-shadow: inset 10px 0 12px rgba(0,0,0,0.35);
}
.corner-textbox-8 {
box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
background-color: #BFE2FF;
border: 12px solid #f5f5f5;
max-width: 100%;
max-height: 100%;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
|
1 |
.corner-box-8 { positionrelative; box-shadow20px20px36pxrgba(0,0,0,0.2); border11pxsolid#ededed; width300px; padding20px; margin30px; text-aligncenter; displayinline-block; } .corner-textbox-8:before { content» «; positionabsolute; top; left; z-index999; width100%; height100%; box-shadowinset10px12pxrgba(0,0,0,0.35); } .corner-textbox-8 { box-shadowinset10pxrgba(0,0,0,0.2); background-color#BFE2FF; border12pxsolid#f5f5f5; max-width100%; max-height100%; padding12px; displayflex; align-itemscenter; justify-contentcenter; flex-directioncolumn; } |
Настройки рамки
Чтобы обрамление текста оказалось еще более заметным и привлекало к себе внимание, параметры рамки можно изменить. По умолчанию данные обрамляются обычными тонкими линиями черного цвета
Но у пользователя есть возможность изменять следующие характеристики:
- Ширину линий — от 0,25 до 6 пунктов. Подходит и для выделения текста, и для оформления страницы и всего документа.
- Цвета линий. Можно выбрать стандартный вариант или установить свой оттенок с помощью встроенной палитры.
- Рисунок. Обрамление листа небольшими изображениями, что позволяет сделать, например, рекламный буклет или красивое праздничное поздравление. Форматирование относится только к целому документу или разделу. Выделить таким способом абзац или часть текста не получится.
Рамку можно сделать объемной или с тенью по краям. Для этого при настройке оформления следует выбрать соответствующий пункт в расположенном слева списке на вкладках «Граница» или «Страница». Оформить таким способом получится и весь документ, и отдельные абзацы.
- Как сделать альбомный лист в Ворде за пару кликов
- Как преобразовать голосовое сообщение в текст
Создать рамку с помощью специальных инструментов Word
Если же нужно сделать специальные графические рамки для технических курсовых работ, то лучше использовать специальные инструменты Word.
Какие размеры рамки для курсовой работы должны быть по ГОСТу? Чтобы ответить на этот вопрос, стоит изучить ЕСКД — единую систему конструкторской документации. А именно ГОСТ 2.301-68 «Форматы». В нём указаны следующие размеры рамок:
- сама рамка составляет 210х297 мм;
- отступ слева — 20 мм;
- отступы справа, сверху, снизу — 5 мм.
Создание рамки для курсовой в Word 2010
А теперь создадим рамку по ГOСТу для курсовой в Word 2010 с помощью специального инструмента.
Шаг 1. Откроем новый документ и первым делом во вкладке «Разметка страницы» зададим поля. В нашем случае:
- верхнее — 1,4 см;
- нижнее — 0,43 см;
- левое — 2,9 см;
- правое — 1,3 см.
Обратите внимание: в вашем вузе могут быть свои требования по оформлению. Поэтому всегда уточняйте информацию у научного руководителя и изучите методические рекомендации
Шаг 2. Документ необходимо разбить на разделы или вставить разрывы. Это делается для того, чтобы рамка была на нужных страницах. Например, на титульном листе рамка не нужна, в отличие от основной части работы. К тому же бывает, что на разных страницах нужны разные рамки.
Выбираем вкладку «Разметка страницы», затем «Разрывы», кликаем на кнопку «Следующая страница». Оставим первую страницу для титульного листа и будем создавать рамку на второй странице во втором разделе документа.
Шаг 3. Делаем непосредственно саму рамку.
Во вкладке «Разметка страницы» выбираем «Границы страниц». Указываем тип границы — рамка. В параметрах указываем поля рамки:
- верхнее — 21 пт;
- нижнее — пт;
- левое — 21 пт;
- правое — 19 пт.
Также не забываем указать поля относительно текста и поставить галочку напротив параметра «Все впереди». Границу применяем к текущему разделу.
Шаг 4. Создаём нужную рамку. Внизу листа вставляем таблицу. Для этого сначала во вкладке «Вставка» выбираем «Нижний колонтитул», затем «Изменить нижний колонтитул», отключаем функцию «Как в предыдущем разделе».
Вставляем таблицу нужной конфигурации. Мы вставляем таблицу на 8 строк и 9 столбцов. Во вкладке «Макет» для работы с таблицами указываем размеры ячеек:
- высота ячеек — 0,5 см;
- ширину ячеек задаём слева направо: 0,7 см, 1 см, 2,3 см, 1,5 см, 2,3 см, 6,77 см, 1,5 см, 1,5 см, 2 см.
Создаём рамку курсовой по ГОСТу
Готово. Теперь можно объединить ячейки и вписать в них необходимую информацию о вузе, кафедре, преподавателе, и работе. Здесь мы впишем произвольный текст, а ячейку для номеров страниц оставим пустой. Мы получили один лист с рамкой для курсовой.
А как скопировать рамки в ворде для курсовой? Если вы делали таблицы в колонтитуле, то при переходе на следующую страницу текущего раздела документа на ней будет автоматически появляться эта же рамка с таблицей, а вы сможете спокойно писать работу, не думая о ней.
Кстати! Для наших читателей сейчас действует скидка 10% на любой вид работы
Создание рамки для курсовой в Word версиях 2013, 2016 и 2019 года
В более поздних версиях Word нужно идти немного другим путём, чтобы создать рамку для курсовой.
Шаг 1. Откроем новый документ и во вкладке «Макет» найдём в левом верхнем углу раздел «Поля». Кликаем и выбираем «Настраивыемые поля». Появится вкладка «Разметка страницы», в которой нужно задать поля вручную:
- верхнее — 1,4 см;
- нижнее — 0,43 см;
- левое — 2,9 см;
- правое — 1,3 см.
Шаг 2. Документ разбиваем на разделы. Для этого идём в уже знакомую во вкладку «Макет», выбираем «Разрывы» и кликаем на кнопку «Следующая страница». Напомним, что это необходимо, чтобы разместить рамку на нужных страницах.
Шаг 3. Делаем непосредственно саму рамку.
Во вкладке «Главная» нажимаем на треугольник возле иконки границ и находим в самом конце строчку «Границы и заливка». В открывшейся вкладке можно выбрать рамку как к абзацу, так и ко всему документу. В параметрах указываем поля рамки:
- верхнее — 21 пт;
- нижнее — пт;
- левое — 21 пт;
- правое — 19 пт.
Также не забываем указать поля относительно текста и поставить галочку напротив параметра «Всегде впереди». Границу применяем к этому разделу.
Шаг 4. Создаём нужную рамку. Внизу листа вставляем таблицу. Для этого сначала во вкладке «Вставка» выбираем «Нижний колонтитул», затем «Изменить нижний колонтитул», отключаем функцию «Как в предыдущем разделе».
В колонтитул вставляем таблицу нужной конфигурации: на 8 строк и 9 столбцов. Выделяем получившуюся таблицу и кликаем на правую кнопку мыши. В открывшемся окне выбираем «Свойства таблицы». Здесь необходимо указать размеры ячеек:
- высота ячеек — 0,5 см;
- ширину ячеек задаём слева направо: 0,7 см, 1 см, 2,3 см, 1,5 см, 2,3 см, 6,77 см, 1,5 см, 1,5 см, 2 см.
Всё! Рамка готова! Вписывайте в ячейки нужную информацию и меняйте форму рамки при необходимости.
Создание рамки с помощью таблицы
В текстовом редакторе Майкрософт Ворд, есть множество преимуществ . Одно из них, возможность нарисовать рамку самостоятельно. Какие действия для этого нужны, рассмотрим ниже.
Не важно, для чего нужна рамка, пусть то будет титульный лист реферата или отчета. Ведь оформление зависит от вашей руки
Данное решение не является примером, для гостовского оформления, так как необходимо учитывать отступы с каждой стороны листа. Настройку которых, надо задавать отдельно.
- На главном верхнем меню надо выбрать кнопку под названием «Нижняя граница» в подразделе «Абзац».
- Из представленного списка нажать по строчке «Нарисовать таблицу».
- Курсор изменит свой вид с курсора на карандаш. Установить карандаш в нужном месте и потянуть до необходимого размера и отпустить. Получится, своего рода большая табличная ячейка. Создать рамку для текста вокруг любого размера не составит огромного труда.
Box 9
Теперь добавим прозрачную рамку вокруг содержания.
/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */
.box9{
margin: 70px 50px;
width: 300px;
min-height: 250px;
position:relative;
border: 1px solid rgba(0,0,0,0.1);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius:20px;
background: white;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
box-shadow:0px 0px 5px rgba(0,0,0,0.3);
}
/* Здесь определяется обводка вокруг рамки */
.box9:before{
content: '';
width: 110%;
left: 0;
height: 111%;
z-index:-1;
position:absolute;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius:20px;
border: 1px solid rgba(0,0,0, 0.1);
background: rgba(0, 0, 0, 0.0);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
-webkit-transform: translate(-5%,-5%);
-moz-transform: translate(-5%, -5%);
-o-transform: translate(-5%, -5%);
transform: translate(-5%, -5%);
}
/* Здесь определяется ленточка в верхней секции */
.box9:after{
content: '';
position:absolute;
top:-25px; left: 30%;
width: 130px;
height: 40px;
background: rgba(0, 0, 0, 0.1);
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
}
Рамка таблицы
По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border
Но стоит обратить внимание на то, что если добавить рамку только к элементу , то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство и для элементов и
table, th, td { border: 1px solid black; }
Попробовать »
Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing, которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.
Даже если убрать промежутки между ячейками с помощью значения свойства , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:
- separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
- collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
table, td, th {
border: 4px outset blue;
border-spacing: 5px;
}
.first { border-collapse: collapse; }
</style>
</head>
<body>
<table>
<tr><th>Имя</th><th>Фамилия</th></tr>
<tr><td>Гомер</td><td>Симпсон</td></tr>
<tr><td>Мардж</td><td>Симпсон</td></tr>
</table>
<br>
<table class="first">
<tr><th>Имя</th><th>Фамилия</th></tr>
<tr><td>Гомер</td><td>Симпсон</td></tr>
<tr><td>Мардж</td><td>Симпсон</td></tr>
</table>
</body>
</html>
Попробовать »
CSS Advanced
CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients
CSS Shadows
Shadow Effects
Box Shadow
CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS MaskingCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries
CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive
Как в Ворде сделать рамку вокруг страницы
При оформлении документа, часто требуется сделать обрамление рамкой всех или некоторых страниц в документе Word. Для этого необходимо выполнить следующие действия:
- Во вкладке «Главная» перейдите в группу «Абзац», нажмите на стрелку у кнопки «Границы».
- В контекстном меню выберите пункт «Границы и заливка…».
- В окне «Границы и заливка» откройте вкладку «Страница».
- Настройте визуальные параметры вывода рамки на странице документа.
- Выберите параметры вставки рамки.
В программе Word доступны следующие варианты для вставки рамки на страницы:
- всему документу — обрамление рамкой будет на всех страницах документа;
- этому разделу — рамка будет вставлена только на этот раздел документа;
- этому разделу (только 1-й странице) — вывод рамки только на первой странице документа;
- этому разделу (кроме 1-й страницы) — вставка рамки на всех страницах документа, кроме первого листа.
После применения настроек, страницы в документе Word обведены рамкой.
Как сделать рамку border только с одного края (границы)
У свойства CSS border
есть производные свойства для задания односторонних границ у элемента:
- border-top
— для задания рамки сверху (верхняя граница) - border-bottom
— для задания рамки снизу (нижняя граница) - border-right
— для задания рамки справа (правая граница) - border-left
— для задания рамки слева (левая граница)
Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.
Также есть свойства
- border-top-color
— задание цвета верхний границы - border-top-style
— задание стиля верхней границы - border-top-width
— задание толщины верхней границы - и т.д. для каждого направления
На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми
4.1. Пример. Красивая рамка для выделения цитат
Вот как это выглядит на странице:
Пример рамки для цитаты
Примечание
Можно задать отдельную границу для каждой из сторон.
Как в Ворде сделать рамку
Обрамление абзаца позволяет выделить важную мысль, а рамка вокруг страницы украшает или бывает нужна по требованиям к оформлению некоторых видов документов. Расскажем, как сделать рамку в Ворде – для фрагмента текста или для всех листов, включая обрамление со штампом по ГОСТу.
Обрамление текста
Выделить фрагмент текста можно обычной прямоугольной рамочкой или фигурной.
Обычной рамкой
Как сделать рамку в Ворде вокруг текста:
- Выделите текст, который хотите обрамить. Это может быть отдельное предложение или целый абзац.
- На панели инструментов во вкладке «Главная» кликните на значок «Границы» в разделе «Абзац».
- Выберите, с каких сторон абзаца вам нужны границы.
Чтобы изменить внешний вид линий или обрамить текст, откройте последний пункт подменю «Границы и заливка». Поменяйте тип, цвет и ширину границ. В окошке «Образец» настройте, с каких сторон поставить линии. Если вы хотите нарисовать рамочки для каждой взятой строки, в пункте «Применить к» выберите «Тексту» – строчки будут обрамлены по-отдельности. Во вкладке «Заливка» настройте цвет и узор фона.
Фигурой
Сделать красивую рамку можно с помощью разнообразных фигур. Зайдите во вкладку «Вставка», в разделе «Иллюстрации» кликните на «Фигуры». В выпадающем списке подберите изображение из перечня – прямоугольники, звезды, стрелки, выноски и многое другое. Щелкните на выбранную картинку, установите курсор в нужном месте листа, зажмите левую кнопку мыши и ведите ее вбок – на странице появится фигура. Чтобы вставить текст в рамку, кликните по изображению правой кнопкой мышки, в меню выберите «Добавить текст».
Рамку-фигуру можно изменить в любой момент – кликните на ней, в меню появится вкладка «Формат». На ней доступны различные стили, шаблоны заливки, можно менять направление текст, добавлять объекты WordArt. Такую рамочку легко перемещать по документу – просто зажмите на ней кнопку мыши и ведите указатель в любую сторону – или копировать, текстовое содержимое будет также двигаться.
Обрамление страницы
Разберемся, как вставить базовую рамку в Ворде. Нам потребуется инструмент «Границы страниц», в зависимости от версии программы он располагается во вкладке:
- 2016: «Конструктор»;
- 2013: «Дизайн»;
- 2010 и в Ворде 2007: «Разметка страницы»;
- чтобы создать рамку в Ворде 2003, выберите одноименный пункт в меню «Формат».
В окошке настройте рамочку – тип границ, формат линий, их цвет и ширина, для узорных обрамлений – рисунок. В разделе «Образец» выставьте места границ.
Применить созданный рисунок можно ко всему документы – в этом случае одинаковые рамки автоматически появятся на всех листах. Или к отдельным разделам, для чего надо предварительно расставить символы разрыва разделов в нужных местах.
Использование шаблонов
Для оформления документов по ГОСТу используйте специальные шаблоны рамок, которые бесплатно можно скачать в интернете. Шаблон – это файл формата «.dot». После скачивания откройте его, как обычный документ. Появится сообщение системы безопасности о запуске макросов – разрешите включить содержимое. На панели инструментов появится новая вкладка «Надстройки».
Как вставить рамку в Ворде: выбирайте нужную рамочку со штампом и кликайте на ее. На текущем листе появится обрамление, вам остается только вписать данные в поля.
Заключение
Мы разобрались, как в Ворде сделать рамку. Программа предоставляет интересные инструменты, чтобы создавать строгие или вставлять красивые рамочки. Вы можете делать рамки самостоятельно или пользоваться готовыми шаблонами, чтобы быстро получить готовый результат.
Как сделать рамку в Word вокруг абзаца
Сейчас мы разберем, как сделать рамку вокруг текста в Word, выделив определенный абзац на странице документа. Сначала потребуется выделить текст, вокруг которого будет обрамлена рамка.
В разных версиях приложения, названия разделов меню отличаются, обратите внимание на этот момент при работе. В Word 2020 пройдите шаги:
В Word 2020 пройдите шаги:
- Войдите в меню «Конструктор».
- Перейдите в группу «Фон страницы», нажмите на кнопку «Границы страниц».
В Word 2020 и в Word 2013 сделайте следующее:
- Перейдите во вкладку «Дизайн».
- В группе «Фон страницы» нажмите на «Границы страниц».
В программах Word 2010 и Word 2007 проделайте следующие действия:
- Откройте вкладку «Разметка страницы».
- В группе «Фон страницы» выберите «Границы страниц».
Далее выполняются одинаковые действия:
- В окне «Границы и заливка», во вкладке «Граница» выберите тип границы: «рамка», а затем настройте параметры вставки рамки в текст документа.
- Настройте тип создаваемой рамки:
- выберите тип из различных вариантов сплошной или прерывистой линии;
- подберите цвет рамки, нужную ширину;
- укажите область применения: к абзацу.
- посмотрите на образец, в котором можно для добавить или удалить некоторые границы у рамки.
- Нажмите на кнопку «ОК».
В результате, нужный абзац на странице документа Word выделен рамкой, согласно ранее выбранным параметрам.
На одной странице документа Word можно вставить рамку вокруг абзаца, текста (отдельных слов или предложений), или всего листа. При оформлении, на одной странице можно сделать несколько рамок разного типа.
Рамки через box-shadow
Хотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline. Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.
Чтобы получить рамку, первые три параметра следует задать нулевыми, они отвечают за положение тени и её размытие. Четвёртый параметр в данном случае отвечает за толщину границы, а пятый устанавливает цвет рамки. Для второй рамки четвёртый параметр равняется сумме толщин двух рамок.
В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow.
Пример 4. Использование box-shadow
Результат данного примера показан на рис. 3.
Рис. 3. Рамки, созданные свойством box-shadow
Box 4
Отличный эффект листа бумаги, разложенного на столе. Достигается с помощью размещением теней.
/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */
.box4{
margin: 50px;
min-height: 100px;
width: 300px;
padding: 5px 0 ;
position:relative;
background: #fff;
background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2));
background: -moz-linear-gradient(0% 0% 360deg, #fff, #f2f2f2 20%, #fff );
border: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
/* В данном псевдо классе определяется верхняя правая тень*/
.box4:before{
content: '';
width: 50px;
height: 50px;
top:0; right:0;
position:absolute;
z-index: -1;
-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
translate(-14px,20px)
skew(-20deg);
-moz-transform: rotate(2deg)
translate(-14px,20px)
skew(-20deg);
-o-transform: rotate(2deg)
translate(-14px,20px)
skew(-20deg);
transform: rotate(2deg)
translate(-14px,20px)
skew(-20deg);
}
/* В данном псевдо классе определяется верхняя левая тень */
.box4:after{
content: '';
width: 50px;
height: 50px;
top:0; left:0;
position:absolute;
z-index:-1;
display: inline-block;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
translate(12px,25px)
skew(20deg);
-moz-transform: rotate(2deg)
translate(12px,25px)
skew(20deg);
-o-transform: rotate(2deg)
translate(12px,25px)
skew(20deg);
transform: rotate(2deg)
translate(12px,25px)
skew(20deg);
}
/* Это нижняя правая тень */
.shr_box4{
width: 100px;
height: 100px;
bottom:0; right:0;
position:absolute;
z-index: -1;
-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
translate(-20px,-15px)
skew(20deg);
-moz-transform: rotate(0deg)
translate(-20px,-15px)
skew(20deg);
-o-transform: rotate(0deg)
translate(-20px,-15px)
skew(20deg);
transform: rotate(0deg)
translate(-20px,-15px)
skew(20deg);
}
/* Это нижняя левая тень */
.shl_box4{
content: '';
width: 100px;
height: 100px;
bottom:0; left:0;
position:absolute;
z-index: -1;
-webkit-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
translate(20px,-15px)
skew(-20deg);
-moz-transform: rotate(0deg)
translate(20px,-15px)
skew(-20deg);
-o-transform: rotate(0deg)
translate(20px,-15px)
skew(-20deg);
transform: rotate(0deg)
translate(20px,-15px)
skew(-20deg);
}
Нарезка изображения
Прежде, чем мы продолжим, нужно разобраться с “нарезкой изображения”, так как это новое веяние в определении свойств. Нарезка изображения определяет разрезы на исходном изображении, которые проводятся соответственно сверху, справа, снизу и слева от границ изображения и разделяют его на девять частей, как показано на следующем рисунке.
Как видно на рисунке, секции 1, 3, 7 и 9 будут использоваться для углов рамки, а секции 2, 4, 6 и 8 — для сторон рамки (следует убедиться, что секции сторон можно растягивать или повторять без визуальных искажений).
Значение для нарезки можно задавать в пикселях или процентах.
