Рассмотрим как border сделать картинкой. Обязательно взгляните на примеры, генератор здесь только для того, чтобы понять механизм действия свойств. На практике без Фотошопа будет трудновато. Там есть такая незаменимая линейка.
Свойство border-image-source
Одно изображение или градиент будет использован вместо border| border-image-source: none; | /* по умолчанию */ |
| border-image-source: url(image.jpg); | /* картинка */ |
| border-image-source: linear-gradient(red, yellow); | /* градиент */ |
div {
height: 25em;
border: 5em solid #42aaff;
border-image-source: url(http://3.bp.blogspot.com/-Wc-kUbJTews/UkwawgOor-I/AAAAAAAAECw/NbiPwRypT80/s1600/border-image.png);
}
Свойство border-image-slice
Картинку делит на 9 частей. 2, 4, 6, 8 будут повторяться/растягиваться (в генераторе ниже красные линии должны быть перехлёснуты или border-image-slice должно составлять ниже 50%). Середина fill может быть как показана пользователю, так и нет (см. переключатель).| border-image-slice: 100%; | /* по умолчанию */ |
| border-image-slice: 1; | /* — в пикселях для растровых изображений, — в координатах вектора для векторных изображений */ |
| border-image-slice: 1% fill; | /* fill заполняет пространство внутри элемента, а не только территорию border или border-image-width */ |
|
| 1 | 2 | 3 | |
| 4 | 6 | |||
| 7 | 8 | 9 |
div {
height: 25em;
border: 5em solid #42aaff;
border-image-source: url(http://3.bp.blogspot.com/-Wc-kUbJTews/UkwawgOor-I/AAAAAAAAECw/NbiPwRypT80/s1600/border-image.png);
border-image-slice: 100%;
}
Свойство border-image-width
| border-image-width: 1; | /* по умолчанию, равна border-width. Если border-image-width поставить 2, то ширина/высота фона border будет составлять: border-width умножить на 2. В случае с примером: 5em*2=10em */ |
| border-image-width: 100px; | /* в любых единицах измерения, в том числе в процентах. border может отсутствовать */ |
| border-image-width: auto; | /* реальная величина рисунка, а не та, которая образовалась из-за border-width. В образце она такая:  border может отсутствовать */ |
div {
height: 25em;
border: 5em solid #42aaff;
border-image-source: url(http://3.bp.blogspot.com/-Wc-kUbJTews/UkwawgOor-I/AAAAAAAAECw/NbiPwRypT80/s1600/border-image.png);
border-image-slice: 100%;
border-image-width: 1;
}
Свойство border-image-outset
Отступ от внешнего края border/родителя.| border-image-outset: 0; | /* по умолчанию, равна border-width. Если border-image-outset поставить 2, то отступ фоновой картинки от внешней кромки рамки, созданной border, будет составлять: border-width умножить на 2. В случае с примером: 5em*2=10em */ |
| border-image-outset: 10px; | /* в любых единицах измерения, но не в процентах */ |
div {
height: 25em;
border: 5em solid #42aaff;
border-image-source: url(http://3.bp.blogspot.com/-Wc-kUbJTews/UkwawgOor-I/AAAAAAAAECw/NbiPwRypT80/s1600/border-image.png);
border-image-slice: 100%;
border-image-width: 1;
border-image-outset: 0;
}
Свойство border-image-repeat
Задаёт повторение картинки border по горизонтали, по вертикали или показывает рисунок в одном экземпляре| border-image-repeat: stretch; | /* изображение не повторяется, растягивается */ |
| border-image-repeat: repeat; | /* изображение повторяется, возможны обрезанные края */ |
| border-image-repeat: round; | /* изображение повторяется и масштабируется так, чтобы не было обрезанных краёв */ |
| border-image-repeat: space; | /* изображение повторяется, немасштабируется. Обрезанных краёв не будет так как появляется дополнительное пространство между плитками */ |
div {
height: 25em;
border: 5em solid #42aaff;
border-image-source: url(http://3.bp.blogspot.com/-Wc-kUbJTews/UkwawgOor-I/AAAAAAAAECw/NbiPwRypT80/s1600/border-image.png);
border-image-slice: 100%;
border-image-width: 1;
border-image-outset: 0;
border-image-repeat: stretch;
}
Краткое написание border-image
div {
height: 25em;
border: 5em solid #42aaff;
border-image: url(http://3.bp.blogspot.com/-Wc-kUbJTews/UkwawgOor-I/AAAAAAAAECw/NbiPwRypT80/s1600/border-image.png);
}
Примеры
Пример 1: средние части рамки повторяются по вертикали и горизонтали
Для удобства понимания в образце
- в фон не входит border (см. background-clip: padding-box;).
- потянув за правый нижний угол фона можно менять размеры блока (как сделать).
<div style="
border-style: solid;
border-width: 100px 100px 140px;
border-image: url(http://3.bp.blogspot.com/-uj02rbHet24/UkAcbIKrCQI/AAAAAAAAEBQ/okkvhHMCqAA/s00/ramka.png) 245 452 380 1335 / 98px 180.8px 152px 534px repeat round;
">как сделать рамку вокруг резинового растягивающегося блока div</div>
То есть я взяла картинку с исходной шириной 1795px и высотой 1205px. Определила область, которая будет повторяться (наведите на изображение ниже).
Через дробь поделила те же значения на 2.5 чтобы пропорционально увеличить рамку. По горизонтали участок изображения (тоненькая линия) будет просто повторяться, а по вертикали повторяться и растягиваться так, чтобы поместиться целиком, дабы не было полукругов.
border-width я писала произвольно. Нужно было подвинуть содержимое элемента влево, а внизу оставить побольше места.
Пример 2: в качестве рамки применяется большое пропорциональное единое изображение без повторений и растягиваний средней части
Для удобства восприятия в образце
Поскольку border-width не может быть указан в процентах, была применена эта техника.
<style>
.dva {
position: relative;
padding-top: calc(2048*100%/1442);
background: url(http://4.bp.blogspot.com/-2EuZ69vi_-Y/UkEPKvIpW6I/AAAAAAAAECA/SpdlzrqQ_UU/s00/ramka.png) no-repeat;
background-size: 100% auto;
}
.dva > div {
position: absolute;
top: calc(510*100%/2048);
left: calc(155*100%/1442);
width: calc(100% - 155*2*100%/1442);
height: calc(100% - (760 + 510)*100%/2048);
overflow: auto;
}
</style>
<div class="dva"><div>содержание</div></div>
Ширина рисунка 1442, высота 2048. Аналогично рассчитываем область.
Пример 3: border в виде градиента
Ко всем блокам применяется стиль
border: 20px double #000;
border-image: linear-gradient(#ccc, #000) 1;
border-image: linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B) 1;
border-image: linear-gradient(to top, transparent 20px, #000) 1;
border-image: linear-gradient(to top right, red 50%, #000 50%) 15%;
border-image: linear-gradient(to top right, red, transparent, transparent) 1%;
border-image: radial-gradient(#000 70%, transparent 99%) 1%;
border-image: repeating-linear-gradient(to left, #7df9ff 1%, #ff7def 2%) 40 repeat;
border-image: repeating-linear-gradient(300deg, transparent, #E7D5C0 3%, transparent 10%) 100% 10% 100% 10% / 1; padding: .01%;
Комментариев нет: