Border-top-left-radius, border-top-right-radius,

Border-bottom-left-radius, border-bottom-right-radius

С помощью данных свойств можно задавать радиусы для скруглений каждому углу в отдельности:

- border-top-left-radius позволяет скруглить верхний левый угол элемента;

- border-top-right-radius позволяет скруглить верхний правый угол элемента;

- border-bottom-left-radius позволяет скруглить левый нижний угол элемента;

- border-bottom-right-radius позволяет скруглить правый нижний угол элемента.

Как и в свойстве border-radius, значения можно указывать в единицах длины и процентах от размеров родительского элемента:

border-top-left-radius: 50%; скругление левого верхнего угла в виде круга.

border-top-right-radius: 10px 20px; скругление правого верхнего угла в форме овала (эллипса). Первое значение определяет горизонтальный радиус, второе - вертикальный радиус.

Outline

Свойство outline позволяет в одном объявлении указать стиль (outline-style), ширину (outline-width) и цвет (outline-color) внешней границы элемента. Внешняя граница выглядит как ещё одна рамка, которая расположена поверх границы (см. рисунок 44).

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

Рисунок 44 – Результат использования свойства outline

 

Внешняя граница располагается с внешней стороны рамки, если она присутствует, и не влияет на общий размер элемента.

Пример

p { border: 2px solid red;

outline: green dotted thick; }

Outline-offset

Свойство outline-offset отодвигает внешнюю границу на указанное расстояние от края элемента.

Пример.

p { bоrdеr: 3рх sоlid blаck;

outline: 5рх sоlid rеd;

outline-offset: 10px; }

Border-image

CSS свойство border-image используется для указания значений таких свойств, как: border-image-source, border-image-width, border-image-slice, border-image-outset и border-image-repeat в одном объявлении через пробел. Данные свойства используются для использования изображений в качестве рамок.

Синтаксис:

border-image: source slice width outset repeat;

Значение по умолчанию: border-image: none 100% 1 0 stretch;

Свойства, указываемые в border-image:

border-image-source - путь к изображению, которое будет использоваться в качестве границ рамки;

border-image-slice - смещение изображения границы внутрь;

border-image-width - ширина изображения-границы;

border-image-outset - величина распространения изображения-границы за пределы рамки элемента;

border-image-repeat - характер отображения изображения-границы: растягивание, повторение или масштабирование.

Пример. Результат выполнения кода виден на рисунке 45.

<! DОСTYPЕ html> < html> < hеаd> < meta chаrsеt=" utf-8" > < titlе> border-image< /title> < style type=" text/css" > div {border-width: 15px; width: 250px; padding: 10px 20px; } #round { border-image: url(" images/av1.png" ) 30 30 round; } #stretch {border-image: url(" images/av1.png" ) 30 30 stretch; } < /style> < /head> < body> < div id=" round" > Изображение повторяется, чтобы заполнить всю область.< /div>

Рисунок 45 – Использование изображения в качестве границы

< div id=" stretch" > Изображение растянуто, чтобы заполнить всю область.< /div>

< p> Здесь исходное изображение, используемое в качестве границы: < /p>

< img src=" images/av1.png" >

< /body> < /html>

overflow, overflow-x, overflow-y

Когда для элементов указаны свойства height (высота) и width (ширина), задающие размер, то появляется вероятность того, что контент не поместится в зарезервированное пространство.

Свойство overflow позволяет заранее определить, что будет происходить, если содержимое элемента превзойдет его размер.

Принимаемые значения: visible, hidden, scroll, auto, inherit.

visible - значение по умолчанию –– показывает все содержимое элемента;

hidden - содержимое, которое не вмещается внутрь прямоугольника элемента, отсекается и не выводится на экран.

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

auto – полосы прокрутки добавляются лишь при условии, что содержимое не вмещается в отведенную область.

Свойство overflow-x указывает, обрезать или нет левый или правый край содержимого - если оно не помещается в доступную область элемента.

Принимаемые значения: кроме уже известных значений visible, hidden, scroll, auto, inherit используются значения:

no-display- если содержимое не помещается в блоке элемента, то блок с содержимым удаляется.

no-content - если содержимое не помещается в блоке, то контент не отображается.

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

Resize

Свойство resize устанавливает, может ли размер элемента изменяться пользователем. Свойство resize применяется только к элементам, у которых свойство overflow не имеет значения visible.

Принимаемые значения:

none - запрещает изменять размер элемента;

both - разрешает менять ширину и высоту элемента;

horizontal - разрешает менять ширину элемента;

vertical - разрешает менять высоту элемента;

inherit – наследуется от родителя.

Clip

Можно задать размеры и положение зоны видимости элемента с помощью свойства clip, значениями которого являются: функция rect(top, right, bottom, left), auto, inherit.

По умолчанию зоной видимости является весь элемент (значение auto). Свойство clip указывает размеры абсолютно позиционированного элемента, в пределах которого содержимое будет видимым. Элемент обрезается по указанным размерам, а затем отображается.

Примечание. Свойство clip не работает с элементами, для которых свойство overflow имеет значение visible.

Пример.

clip: rect(0px, 200px, 200px, 0px);

Visibility

Свойство visibility используется для управления видимостью элемента, позволяя скрывать элементы, оставляя при этом пустое пространство на его месте, равное размеру скрытого элемента.Принимаемые значения: visible (по умолчанию), hidden, collapse, inherit.

Примечание. 1. Значение collapse рекомендуется для использования в столбцах и строках таблиц. Использование collapse с прочими элементами может их скрыть, однако лучше это свойство не использовать.

Если нужно скрыть элемент и избежать появления пустого пространства, то следует воспользоваться свойством display со значением none.

Пример.

visibility: visible;

⇐ Предыдущая9101112131415161718Следующая ⇒

Поделиться: