html.okpython.net
HTML и CSS для начинающих

CSS :: Свойство column-rule-style

css-свойство column-rule-style (от англ. column rule style – стиль разделительной линии колонки) используется для установки стиля разделительных линий между колонками в многоколоночном элементе.

Характеристики

  • Значение по умолчанию: none.
  • Применяется: к многоколоночным элементам.
  • Наследуется: нет.
  • Анимируется: нет.
  • JavaScript: object.style.columnRuleStyle="value".

Синтаксис

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Значения

  • none – разделительная линия не отображается, браузер обнуляет ее ширину.
  • hidden – для колонок работает как none.
  • dotted – разделительная линия будет иметь точечный вид.
  • dashed – разделительная линия будет иметь пунктирный вид.
  • solid – разделительная линия будет сплошной.
  • double – разделительная линия будет двойной.
  • groove – разделительная линия будет иметь объемный рифленый вид с эффектом вдавленности.
  • ridge – разделительная линия будет иметь объемный рифленый вид с эффектом выпуклости.
  • inset – разделительная линия будет иметь объемный вид с эффектом вдавленности.
  • outset – разделительная линия будет иметь объемный вид с эффектом выпуклости.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-style

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/column-rule-style

Примеры

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p{
		width: 400px;
		height: 300px;
		margin: 1em;
		padding: 0.7em;
		border: 3px solid green;
		column-count: 3;
		column-rule: 3px green;
		}
		
		.p_1{
		column-rule-style: dashed;
		}
		
		.p_2{
		column-rule-style: double;
		}

	</style>
	
</head>
<body>

	<p class="p_1">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст		
	</p> 
 
	<p  class="p_2">
		Текст текст текст текст текст текст текст 
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
		текст текст текст текст текст текст текст
	</p>
	
 </body>
</html>

Пример №1

▲
▼