Dashed line in css

Dashed line in css

The enumerated value type represents keyword values that define the style of a line, or the lack of a line. The keyword values are used in the following longhand and shorthand border and column properties:

• border , border-style
• border-block , border-block-style
• border-block-end , border-block-end-style
• border-block-start , border-block-start-style
• border-bottom , border-bottom-style
• border-inline , border-inline-style
• border-inline-end , border-inline-end-style
• border-inline-start , border-inline-start-style
• border-left , border-left-style
• border-right , border-right-style
• border-top , border-top-style
• column-rule , column-rule-style

Syntax

Values
The enumerated type is specified using one of the values listed below:
 
none
 
Displays no line. The computed value of the line width is 0 even if a width value is specified. In the case of table cell and border collapsing, the none value has the lowest priority. If any other conflicting border is set, it will be displayed. The none value is similar to hidden.
 
 
hidden
 
Displays no line. The computed width of the line is 0 even if a width value is specified. In the case of table cell and border collapsing, the hidden value has the highest priority. If any other conflicting border is set, it won't be displayed. The hidden value is similar to none, but hidden is not a valid value for outline styles.
 
 
dotted
 
Displays a series of round dots. The radius of the dots is half the computed value of the line's width. The spacing of the dots is not defined by the specification and is implementation-specific.
 
 
dashed
 
Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
 
 
solid
 
Displays a single, straight solid line.
 
 
double
 
Displays two straight lines with some space between them. The length of the lines adds up to the pixel size defined by the line's width.
 
 
groove
 
Displays a border with a carved appearance. This value is the opposite of ridge.
 
 
ridge
 
Displays a border with an extruded appearance. This value is the opposite of groove.
 
 
inset
 
Displays a border that makes the element appear embedded. This value is the opposite of outset. When applied to a table cell border and border-collapse is set to collapsed, this value behaves like groove.
 
 
outset
 
Displays a border that makes the element appear embossed. This value is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.
 
 
 
Note: When is used as the value type for outline and outline-style properties, it is similar to , but does not support hidden and includes the auto value. When auto is set, the user-agent defined value is used.
 
Examples
The first example demonstrates all the keyword values. The second example demonstrates how some line style colors may display in unexpected ways.
Defining line styles
This example shows all the values as values for the CSS border-style and column-rule-style properties.
 
HTML
 
This example uses multiple elements, each with a class representing the value that is being demonstrated.
 
html
div class=""> p>line-style>p> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> 
 
div class="none"> p>nonep> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="hidden"> p>hiddenp> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="dotted"> p>dottedp> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="dashed"> p>dashedp> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="solid"> p>solidp> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="double"> p>doublep> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="groove"> p>groovep> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="ridge"> p>ridgep> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="inset"> p>insetp> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="outset"> p>outsetp> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> 
 
CSS
 
In the CSS for this example, the border and the column-rule for all the 
 
elements is defined to have a width of 7px and the style value of double . For each paragraph, the double value is then overridden by specifying a different value for the border-style and column-rule-style properties.
 
div  display: flex; gap: 1em; list-style: none; align-items: center; > div:first-of-type  display: none; > p:first-of-type  text-align: center; line-height: 5em; > p  width: 10em; height: 5em; background-color: palegoldenrod; > 
 
p  padding: 5px; border: double 7px #bada55; > p + p  columns: 3; column-gap: 20px; column-rule: double 7px; border-color: #000000; > .none p  border-style: none; column-rule-style: none; > .hidden p  border-style: hidden; column-rule-style: hidden; > .dotted p  border-style: dotted; column-rule-style: dotted; > .dashed p  border-style: dashed; column-rule-style: dashed; > .solid p  border-style: solid; column-rule-style: solid; > .double p  border-style: double; column-rule-style: double; > .groove p  border-style: groove; column-rule-style: groove; > .ridge p  border-style: ridge; column-rule-style: ridge; > .inset p  border-style: inset; column-rule-style: inset; > .outset p  border-style: outset; column-rule-style: outset; > 
 
Result
 
Notice that the black border is not always black.
 
Defining line styles and colors
 
This example demonstrates line-style and color choice. With some keyword values, the color of the line may not be what you expect. To create the required "3D" effect of groove, ridge , inset , and outset styles when displaying these values in black or white, user agents use different color calculations than any other color-line combinations.
 
HTML
 
div style="border-color: #000000">div> 
 
div style="border-color: #000001">div> div style="border-color: #ffffff">div> div style="border-color: #ff00ff">div> div style="border-color: #ffff00">div> div style="border-color: #00ffff">div> div style="border-color: #cc33cc">div> div style="border-color: #cccc33">div> div style="border-color: #33cccc">div> div style="border-color: #ff0000">div> div style="border-color: #00ff00">div> div style="border-color: #0000ff">div> div style="border-color: #cc3333">div> div style="border-color: #33cc33">div> div style="border-color: #3333cc">div> div style="border-color: #993333">div> div style="border-color: #339933">div> div style="border-color: #333399">div> section> 
 
CSS
 
The four sides of each have a different value, and each list item has a different value. We use generated content to display the CSS declared inline.
 
section  display: flex; flex-wrap: wrap; gap: 1em; text-transform: uppercase; font-family: monospace; > 
 
div  border-width: 10px; border-style: inset groove ridge outset; padding: 5px; > div::before  content: attr(style); > 
 
Result
 
Notice that the almost-black color of #000001 may be different from the actual black, and the contrast between the dark and light edges is more noticeable when using lighter colors.
 
Specifications
 
Browser compatibility
 
BCD tables only load in the browser
 
See also
 
Found a content problem with this page?
 
This page was last modified on Jul 18, 2023 by MDN contributors.
 
Your blueprint for a better internet.
 
Источник
 
СSS стили для горизонтальных линий
 
Сборник горизонтальных линий с тегом 
 
 
разных видов и стилей.
 
 Сплошные линии 
 
Двойная линия
 
Многострочная линия
 
Двухцветная линия
 
Трехцветная линия
 
Горизонтальный градиент
 
Вертикальный градиент
 
Линия с тенью
 
Замыленная линия
 
Линия «Полка»
 
 Пунктирные линии 
 
Пунктирная линия с фоном
 
Пунктирная линия с градиентом
 
 Точечные линии 
 
Линия из крупных точек
 
 
') 0 0 100% repeat; background-position: 50%; box-sizing: border-box; color: orange; > 
 
 Разное 
 
Вертикальные линии
 
Линии под углом
 
Наклонные линии
 
Комментарии 2
 
Авторизуйтесь, чтобы добавить комментарий.
 
Другие публикации
 
 
Подчеркивание текста можно сделать с помощью нескольких свойств CSS - background-image, background-size и.
 
 
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.
 
 
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет.
 
Источник
 
How to make dashed line using HTML and CSS
 
 
In this article, we will see how we can make a dashed line using HTML and CSS.
 
Here, we will make dashed line using < hr >and < div >tags with come help of CSS styling.
 
Method 1 : Using hr tag and CSS
 
Here, we will use the < hr >tag that creates a horizontal line. And then we will add a class name to it and use border property to create the dashed line.
 
body> hr class="dashed-line"> body> 
 
.dashed-line < border: 2px dashed red; > 
 
Here, we have added a class dashed-line and added a border of 2px dashed with the color red.
 
 
Method 2 : Using repeating-linear-gradient in CSS
 
We can also use the repeating-linear-gradient() function with the background CSS property to create a gradient line with dashed pattern on our HTML website.
 
The repeating-linear-gradient() function is used to create an image that repeats a linear gradient.
 
We can use this repeating gradient to create a dashed line in HTML.
 
background-image: repeating-linear-gradient( angle | to side-or-corner, color-stop1, color-stop2, . ); 
 
angle | to side-or-corner : degree and direction of the linear gradient.
 
color-stop : Color values with one or two stop positions (given in percentage or length along the gradient's axis).
 
body> div class="line"> div> body> 
 
.line < margin: 5px 0; height: 5px; background: repeating-linear-gradient( to right, transparent, transparent 10px, black 10px, black 20px ); /*10px transparent then 10px black -> repeat this!*/ > 
 
In the code above, the transparent color is from 0 to 10px and the black color starts from 10px and stops at 20px. And since it's repeating itself, it will create a dashed line on our html page.
 
Источник
 
text-decoration-style
 
The text-decoration-style CSS property sets the style of the lines specified by text-decoration-line . The style applies to all lines that are set with text-decoration-line .
 
Try it
 
If the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an HTML tag, like or . As browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation.
 
When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.
 
Syntax
 
/* Keyword values */ text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; /* Global values */ text-decoration-style: inherit; text-decoration-style: initial; text-decoration-style: revert; text-decoration-style: revert-layer; text-decoration-style: unset; 
 
Values
 
Draws no line. Use text-decoration-line : none instead.
 
Formal definition
 
Formal syntax
 
text-decoration-style = 
solid | 
double | 
dotted | 
dashed | 
wavy 
 
Examples
 
Setting a wavy underline
 
The following creates a red wavy underline:
 
CSS
 
.wavy  text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; > 
 
HTML
 
p class="wavy">This text has a wavy red line beneath it.p> 
 
Results
 
Specifications
 
Browser compatibility
 
BCD tables only load in the browser
 
See also
 
 
When setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead.
 
text-decoration-line
 
text-decoration-color
 
text-decoration-thickness
 
text-underline-offset
 
 
Found a content problem with this page?
 
This page was last modified on May 19, 2023 by MDN contributors.
 
Your blueprint for a better internet.
 
MDN
 
Support
 
Our communities
 
Developers
 
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
 
Источник
 
Читайте также:  Отличие final от const java