Clip-path
Возвращаемся к свойству clip-path . С ним анимация становится еще интереснее.
С помощью этого свойства можно анимировать саму точку координат, производя преобразования из одной отсеченной области в другую.
Используя clip-path , мы можем реализовать интересный эффект границы, показанный ниже. Псевдокод выглядит следующим образом:
Рендеринг и схематическая диаграмма:
Демо-версия анимации границы с помощью clip-path на CodePen.
Поскольку в этом случае элементы будут отсечены, псевдоэлементы можно использовать в качестве фона для обрезки и анимации. К тому же на обрезанной границе не будут возникать маленькие треугольники. Этот метод также поддерживает возможность закругления границ ( border-radius ).
Если использовать другой псевдоэлемент для реализации стиля кнопки, можно получить такой эффект:
Еще одна демо-версия анимации границы с помощью clip-path на CodePen.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
What Outline Is
The CSS property surrounds an element with a line outside the border. It does not affect the layout, position, or size of the element since it does not take space.
The CSS shorthand defines all the following properties for the element box outline in one declaration:
| Property | Description |
|---|---|
| outline-color | Sets the outline color |
| outline‑offset | Defines the space between the element’s edge or border and an outline |
| outline-style | Specifies the outline style |
| outline-width | Sets the outline width |
This example sets all properties for color, width, and style:
Example Copy
This paragraph has a 6px dotted outline 0.5 cm away from the border edge.
CSS Outline vs Border
Outlines and borders appear to be similar in their features and definitions. However, here are the main points to remember to know the solution to the CSS outline vs border problem:
- Outlines always add lines on all sides of the element, while borders on different sides can be set separately.
- Outlines do not belong to the CSS box model. Therefore, it does not affect the element layout.
- Outlines do not follow border-radius.
- Outlines are not always rectangular, but they usually are.
Shapes Other Than Rectangular
Outlines do not have to be rectangular, but this fact does not mean you can create circles or other shapes.
Differently than borders, the outline property considers edges as well. If the outlined element continues for multiple lines, the outline ends at the end of the line and starts on the next line again.
Since outline attempts to be fully-connected, it generates a non-rectangular shape.
CSS3 Учебник
CSS3 Закругленные углыCSS3 Изображен. границаCSS3 Слои фона изображ.CSS3 ЦветаCSS Ключевые сл. цветаCSS3 Градиент
Линейные градиенты
Радиальные градиенты
Конические градиенты
CSS3 Тени
Теневые эффекты
Тени бокса
CSS3 Эффект текстаCSS3 Веб шрифтыCSS3 2D ТрансформацияCSS3 3D ТрансформацияCSS3 ПереходCSS3 АнимацияCSS3 Всплыв. подсказкиCSS3 Стиль изображенияCSS3 Отраж. изображенияCSS3 Объект-подгонкаCSS3 Объект-позицияCSS3 МаскировкаCSS3 КнопкиCSS3 ПагинацияCSS3 Несколько столбцовCSS3 ИнтерфейсCSS3 Переменные
Переменная var()
Переопределение
Переменные с JS
Медиа-запросы
CSS3 Размеры боксовCSS3 Медиа запросыCSS3 Медиа примерыCSS3 Флексбокс
CSS Гибкий бокс
CSS Flexbox контейнер
CSS Flexbox элементы
CSS Flexbox отзывчивый
CSS Outline Properties
The Outline-style Property
Keeping in trend with great CSS abilities, the outline properties provide a set of flexibility in design. The following values are for the outline-style property. Each one gives a different visual appearance for the outline itself.
- dotted – This value gives a dotted appearance for the outline.
- dashed – This value provides a dashed look for the outline.
- solid – When used, this value sets a solid line for the outline.
- double – This value sets a double outline.
- groove – When applied, this value gives a 3D groove to the outline.
- ridge – Set a 3D ridged look for the outline.
- inset – This value applies a 3D inset on the outline.
- outset – A value used to provide a 3D outset outline.
- none – This value states there is no outline, (the default).
- hidden – This sets an outline but hides it on the HTML render.
In the CSS example image below, you can see the outline-style property has been set to the value of “double” for the outline.
The Outline-width Property
The outline-width property changes the width of the outline. Note that this affects the width of the outline itself, not the space the target element takes up on a row. You can set this property using one of the following values.
- thin – Sets a thin line for the outline, (default setting).
- medium – Applies a medium line for the outline.
- thick – This value sets a thick line on the outline, generally about 5 pixels.
- User declared size – You can set the size as you wish via px, in, cm, cm, em, or pt values.
In the example below, the outline-width property has been set to “thick” to alter its width.
In the next example, the outline-width has instead been set to a pixel size of 10.
The Outline-color Property
As you might have guessed, the outline-color property modifies the color value of the outline. The color can be applied using a hex, RGB, and HSL value. You may even use a direct color name supported by CSS. In the example shown below, the outline-color has been set to red.
It’s also worth noting that you can set the color value to “invert”. This provides an inverse of the color. This will allow the outline to appear visible against the background.
The Outline-offset Property
The outline-offset property provides spacing between the element’s edge and the outline itself. This is a great place to serve as a reminder that the outline is not adhering to the CSS box model on an HTML element. In the example below, note how the outline-offset value is set to six pixels.
In the next example, the outline-offset property is set with a value of 26 pixels.
You can see how the outline has moved out and around from the element with no concern for the other paragraph element sitting above it. In fact, the other paragraph element is now obscured by the outline attached to the target HTML element.
This is why it is a good idea to understand the relationship between the outline and an element as well as the difference between its behavior with the box model. Knowing these key differences can help you decide if you want to use a CSS outline or a CSS border on an element.
___________________________________________________________________
Even with this bit of CSS knowledge under your belt, there is a vast ocean of abilities waiting for you. Take another step towards building your future. Claim advanced programming skills to tackle your designs. The creativity of programming is allowing people to do even more with their ideas.
If you want to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
Useful Tips When Coding With the CSS Border Offset Property
These are some of our tips that you can keep in mind whenever using the CSS border offset property in your coding projects:
- If you fail to set the outline-style property, you will end up with an invisible outline.
- Even though the outline is not limited to rectangle shapes, you cannot set different shapes like circles as outlines if the element is not a circle.
- Keep in mind that the output of the set values may vary. Thus, you should try utilizing units that ensure consistency across browsers. For instance, relative values like em work better than pixels across displays of different sizes. Also, you may have to deal with issues that arise from overlapping outlines.
- When an outline surrounds a partially obscure element or empty elements, it can result in visual differences across browsers. The outline-offset property takes into account the edges of the element.
- Always remember that the outline property does not conform to the CSS box model associated with HTML elements. Also, the property does not support percentage values.
Method 2: Place a Border Inside of a Div Using “outline” and “outline-offset” Property
The “outline” property is used to set the line outside of the element. It is the shorthand property of “outline-width”, “outline-style”, and “outline-color”. The syntax of the outline property is as follows:
outline: outline-width outline-style outline-color
Here is the description related to the above-mentioned values:
- outline-width: It is used to set the width of the outline.
- outline-style: It is used to set the style of the outline.
- outline-color: It is utilized to specify the outline color.
Similarly, the “outline-offset” property is used to set the space between the edge of the element and the outline. This space is transparent. The syntax of the outline-offset property is:
outline-offset: value
In the place of value, you can set the space you want to set between the edge of the element and the outline. It creates an outline inside of the element when a negative value is specified.
Let’s move to the example of creating a border inside the div.
HTML
<body>
<div class=»div1″>
<h1>»Ridge Border Inside The Div»<h>
<div>
<div class=»div2″>
<h1>»Double Border Inside The Div»<h>
<div>
<body>
In CSS, use “div1” to access the container we have created in the HTML file. To insert the border inside of the div, follow the given instructions:
- Set the width and height of the div as “500px”.
- Adjust the border’s radius to “50%”.
- Set the color of the text as “rgb(13, 214, 214)”.
- Set the values for text alignment using the line-height property as “500px” and text-align property as “center”.
- By using the background property, set the background color of the div as “black”.
- Create a border using border property as “15px”, “solid”, and “black”.
- For the inside border, use the “outline” property and set the value as “10px”, “ridge”, and “rgb(0, 255, 242)” and set the value of “outline-offset” as “-25px” to place the border inside the div.
CSS
.div1{width 500px;height 500px;border-radius 50%;color rgb(13, 214, 214);line-height 500px;text-align center;background black;outline 10px ridge rgb(, 255, 242);outline-offset -25px;}
For the styling of the second div, only change the style of the outline using the “outline” property and set the values as follows:
outline: 10px double rgb(0, 255, 242);
Conclusion
To place a border inside the div, first, create a border using the “border” property, then use the “box-shadow” and “outline” with “outline-offset” and “box-sizing” properties of CSS. The border property creates a border around the element, and the other four properties can be used to move the border inside the div. As a result of this article, we have shown you the three easiest methods to place borders inside the div.
To place a border inside the div, first, create a border using the “border” property, then use the “box-shadow” and “outline” with “outline-offset” and “box-sizing” properties of CSS. The border property creates a border around the element, and the other four properties can be used to move the border inside the div. As a result of this article, we have shown you the three easiest methods to place borders inside the div.
CSS Outline
CSS outline is a line that is drawn around the HTML element just outside of the border to make the element stand out.
The CSS outline looks just like the border, but it is drawn outside of the border. The outline is not part element’s box model but the border is part of the element’s box model.
CSS outlines are generally used to create focus on certain areas like buttons, forms, links, etc.
You can see the outline is around the element that lies outside the black border.
Example of CSS outline:
Example
Try it
# Syntax
The order of the properties is not important. You can use any of the three properties in any order.
The other 2 properties width and color are optional but you have to mention the type or style of the outline every time you use them.
Example
Try it
CSS outline example
outline
outline: solid;outline: 6px double;outline: dotted red;outline: dashed 4px #00f;outline: 4px dashed #00f;
Change the values from options to see the effect.
What is a CSS Outline?
Much as its namesake implies, a CSS outline provides an outline that surrounds an HTML element. In the sample HTML code below, you can see one of the paragraph tags within the body has been given an id of “outline” to work with.
If you are not familiar with the use of the id attribute in HTML, please refer to HTML/CSS Class and ID Selectors: Everything You Need to Know for a detailed write-up on the topic.
In the next example image, a CSS stylesheet is used to provide the “outline-style” property to the target HTML paragraph element. The rendered result is displayed next to it showing an outline around the text.
In a previous post, the concept of setting up a CSS border provided a very similar effect to the “border-style” property. In much the same way, the outline property cannot be displayed on the page if a style is not declared. After all, the browser needs to know what to show before it can attempt to show it.
Before you jump into any of the other design options provided for the outline property, you need to understand how it differs from the CSS border property. Firstly, a CSS Outline sits on top of or apart from the standard CSS Box Model. This means that the outline does not directly alter the element’s dimensions such as width and height since it does not take up space from the box model. Secondly, a CSS border can be applied selectively to the left, top, right, and bottom of an element. A CSS outline, however, can only be applied as a full set on all four sides.
If you are wondering why you would use an outline over a border, the answer normally returns to the idea of element focus. A CSS outline can be used to add an emphasis to page items such as links, important terms, or even images. An outline can be added in place with the need for the user to hover in order for it to become active.
Use the box-sizing Property to Set the Inner Border in CSS
SQL Server-C2010G: Buб»•i hб»Ќc sб»…
Please enable JavaScript
SQL Server-C2010G: Buб»•i hб»Ќc sб»‘ 3 (HГ m convert(), where, in, like, sum, avg, count, min, max, join)
When we add a border or padding to an element inside a container, the size of the container will grow. The size will differ from the initial one. To eliminate the problem, we can add an inner border to the container.
The inner border is a space created between border and outline property or element. We can apply an inner border to table content, images, and text of paragraphs and headers. An inner border can be of any shape like rectangular, square, circular, etc.
The inner border will not increase the size of the container, and the predefined size will be constant. We can use the property to create an inner border in CSS. Setting the property to will include the border and padding within the dimension of the container.
For example, style a by setting the property to . Set the height and width of to . Next, create a border of width and color. Then, set the property to .
Here, we have created a with dimensions of . Even if we added a border of , the containerвЂs dimension did not change. The border lies within the container. Thus, we can use the property to set the inner border in CSS.
Example Code:
Run Above Code
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
Border-image
Применяя border-image , мы также можем добиться интересной анимации границ. Предположим, у нас есть такой шаблон:
Вы можете использовать свойства border-image-slice и border-image-repeat для получения похожего рисунка границы:
Высота и ширина элемента могут быть изменены по желанию, так что он может быть расширен до любого размера границы контейнера:
Демо-версия border-image на CodePen.
Отличие от примера выше заключается в том, что мы должны заставить паттерн двигаться, то есть нужно получить такое фоновое изображение:
Затем мы также можем получить карту движущейся границы. Код будет точно таким же, но граница движется:
Демо-версия границы “Танцующие черепа” на CodePen.
Method 3: Place a Border Inside of a Div Using “box-sizing” Property
CSS “box-sizing” property calculates the width and height of the element. Syntax of the box-sizing property is:
box-sizing: value
In the place of value, you can set the value of box-sizing as “content-box” and “border-box”.
HTML
<body>
<div class=»div1″>
<h1>»Groove Border Inside The Div»<h>
<div>
<body>
In the CSS, we will use “div1” to access the created div. Next, insert the border inside of the div as follows:
- Set the width and height of the div as “550px”.
- Set the color of the text as “rgb(2, 255, 137)”.
- Set the values for alignment of text using the line-height property as “420px” and text-align property as “center”.
- By using the background property, set the background color of the div as “black”.
- Create a border using border properties as “50px”, “groove”, and “rgb(81, 255, 0)”.
- Next, use the “border” property and set the value as “50px”, “groove”, and “rgb(81, 255, 0)” and set the value of “box-sizing” as “border-box” to place the border inside the div.
.div1{width 550px;height 550px;color rgb(2, 255, 137);line-height 420px;text-align center;background black;border 30px groove rgb(81, 255, );box-sizing border-box;}
After implementing the given code, you will see the following output:
We have provided the three easiest ways for placing a border inside of a div using CSS.
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-shadowbox-sizingcaption-sideclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weighthanging-punctuationheightjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthnav-downnav-indexnav-leftnav-rightnav-upopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidivertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapz-index
outline-style
The CSS property defines the graphic style of outlines.
The property can have a variety of keyword values:
A dotted outline.
A dashed outline.
A double outline.
A solid outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
A inset outline. The effect depends on the outline-color value.
A outset outline. The effect depends on the outline-color value.
A none outline.
A hidden outline.
In this example, we set a CSS outline to text element , and show it with the different values:
Example Copy
Pros
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
Main Features
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
EXCLUSIVE: 50% OFF 
Pros
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
Main Features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
15% OFF 
Pros
- Easy to navigate
- No technical issues
- Seems to care about its users
Main Features
- Huge variety of courses
- 30-day refund policy
- Free certificates of completion
AS LOW AS 14.99$
outline — offset
Свойство outline — offset устанавливает расстояние между фактическим краем элемента и внутренним краем обводки, заданной при помощи outline .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
В качестве значения можно указать положительное или отрицательное число в любых доступных единицах измерения. Если значение отрицательное, то обводка будет отображаться внутри элемента.
Если свойство outline — offset не прописано или ему задано значение 0 , то обводка будет располагаться вплотную к рамке (свойство border ) или границе элемента.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
Расстояние между границей элемента или его рамкой и обводкой прозрачное. Нет возможности его закрасить.
Блочная модель
Браузеры рисуют любой элемент на HTML-странице как прямоугольник. Как рассчитывается размер этого прямоугольника? Разберёмся с одной из основных концепций вёрстки.
Свойство overflow
В следующем приеме задействуется свойство overflow . Реализуйте такую анимацию границы:
Почему же здесь реализуется overflow ?
Демо-версия использования overflow и transform для достижения линейного ховер-эффекта на CodePen.
Обратим внимание на два основных момента
- Мы используем overflow: hidden , чтобы скрыть весь элемент, который изначально был вне контейнера.
- transform-origin управляет центром вращения элемента.
Как вы уже заметили, для создания большинства интересных CSS-эффектов используются похожие приемы.
Проще говоря, анимация, которую мы видим, — это лишь малая часть первоначального явления. С помощью специального обрезания, изменения прозрачности, масок и других средств мы видим только часть исходного явления.
CSS Reference
CSS ReferenceCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS3 Browser Support
CSS Properties
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
caption-side
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
hanging-punctuation
height
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
nav-down
nav-index
nav-left
nav-right
nav-up
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
z-index
CSS Учебник
CSS ГлавнаяCSS ВведениеCSS СинтаксисCSS СелекторыCSS ПодключениеCSS КомментарииCSS Цвет
Цвет
RGB
HEX
HSL
CSS Фон
Фон цвет
Фон изображение
Фон повторение
Фон вложеный
Фон стенография
CSS Границы
Границы
Ширина границ
Цвет границ
Стороны границ
Границы стенография
Закругленные границы
CSS Поля
Отступ cнаружи
Разрушить поля
CSS Отступы внутриCSS Высота и ширинаCSS Бокс модельCSS Контур
Контур
Ширина контура
Цвет контура
Контур стенография
Смещение контура
CSS Текст
Форматирование текста
Выравнивание текста
Оформление текста
Преобразование текста
Интервал текста
Тень текста
CSS Шрифты
Семейство шрифтов
Безопасные шрифты
Резервные шрифты
Стиль шрифтов
Размер шрифтов
Google шрифты
Сочетание шрифтов
Стенография шрифтов
CSS ИконкиCSS СсылкиCSS СпискиCSS Таблицы
Границы таблицы
Размер таблицы
Выравнивание таблицы
Стиль таблицы
Отзывчивая таблица
CSS ДисплейCSS Макс. ширинаCSS ПозиционированиеCSS ПерекрытиеCSS ПереполнениеCSS Поплавок
Поплавок
Очистить
Примеры float
CSS Линейный блокCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS ПрозрачностьCSS Навигация сайта
Панель навигации
Вертикальная
Горизонтальная
CSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Атрибуты селекторовCSS ФормыCSS СчетчикиCSS Макет сайтаCSS Еденицы измеренийCSS ОсобенностиCSS !importantCSS Математ. функции
outline-offset
This paragraph has a 3px outline that is 0.5 cm away from the border edge.
The property determines the space between the border and outline. By default, border and outline are next to each other, but you can separate them with transparent space.
You determine the width of space with values, usually referring to specific units (pt, px, pt, em, cm, etc.)
For example, if you would like to set an and a 0.5cm apart, you would have to add to the code:
Example Copy
This is a container with a 15px space between the outline and the border.
The example below shows how we give the container a 15px space between the and :
Example Copy
The CSS Text Outline Issue
You would assume that creating a CSS outline for text is easy. However, there is no property , only the webkit experimental that still has some issues.
Make CSS outline text with text-shadow. We assign a specific class to the <p> and indicate the necessary properties to make CSS outline text:
Example Copy
How To Set the Border Offset CSS Style: Syntax and Example
No space exists between the border and outline of an element by default. So, when you set an outline and fail to set its offset, the outline will appear immediately outside the border. Furthermore, zero is the default value for the outline-offset property. Hence, it is technically possible to combine both border and outline to create an outer border effect.
To set outline-offset property, you need to use any valid CSS length value. The property also accepts negative values, which allow you to set the outline within the borders of an element. Often, outline serves as a focus ring to help direct the attention of users where you want it. Thus, with the outline-offset property, you can alter the position the focus of the ring.
The syntax for this property is:
| outline-offset: <length>; |
– Example: Setting Outline Offset
Suppose you wish to design a box with a two-pixel wide solid border and a three-pixel wide solid outline. You can offset the outline by five pixels outside the edge of the border. First, define the structure of the box in HTML like so:
| <div id=”outline_offset”>This is a box.</div> |
Next, set the CSS offset border of the box, box width, outline, and outline-offset like so in CSS:
| #outline_offset{ width: 250px; text-align: center; border: blue solid 2px; outline: orange 3px solid; outline-offset: 5px; border-radius: 10px; } |
The outline-offset property is set to five pixels which means the gap between the CSS offset border of the box and the outline is five pixels.
CSS Border & Outline Shared Property Values
Despite their differences, CSS borders and outlines share some of their values. The shorthand you use for each is also very similar.
CSS Border & Outline Shorthand
Like other complex CSS properties, both borders and outlines have shorthand available. Both of these properties share the same format for their shorthand options and it looks like this.
This creates rules that look like this when they are in action. Of course, though, this shorthand doesn’t cover all the values available for these properties.
These shorthand CSS border and outline rules result in a thin blue border with a thick red outline.
Like other shorthand CSS properties, you can also use individual properties to achieve the same results.
CSS border-width & outline-width
Border and outline widths are optional CSS property values that set the thickness of the borders and outlines you use. The format for these properties is the same.
Borders allow individual widths to be set for each side of the element, but outlines do not. You can read more about this in the following sections.
CSS border-style & outline-style
CSS borders and outlines come in a variety of styles. Solid borders are the most common, but you can get creative with the way that you use borders and outlines.
You can find a full list of the different CSS border and outline styles at the end of this article.
CSS border-color & outline-color
Like with other color-based CSS properties, borders and outlines accept all CSS legal colors. This includes hex codes, RGB codes, shorthand colors, and more.
You can also use color gradients when working with CSS borders and outlines.
CSS Text Outline
The text outline is a technique to draw a line around the text. It can be used to indicate some special text or to highlight some text.
The text-stroke property sets the outline of the text. It can be used to highlight text or to indicate some special text.
The property that sets text outline is under experiment and is only supported by the browsers that extend support to ‘webKit’. So the syntax also uses the prefix of WebKit. The property is -webkit-text-stroke.
# Syntax
Example
Try it
CSS text-stroke example
text-stroke
-webkit-text-stroke: 1px #ff0;-webkit-text-stroke: #f00 2px;
Change the values from options to see the effect.