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

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

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

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

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

Синтаксис

column-rule-width: <ширина> | thin | medium | thick

Значения

  • ширина – принимаются любые единицы измерения (смотреть), используемые в CSS. Проценты использовать не разрешается.
  • thin – устанавливает тонкую разделительную линию.
  • medium – устанавливает среднюю разделительную линию.
  • thick – устанавливает толстую разделительную линию.

Ссылки

Примеры

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

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

	</style>
	
</head>
<body>

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

Пример №1