CSS :: Свойство column-rule
http://belarusweb.net
Основы создания сайтов

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

css-свойство column-rule (от англ. column ruleразделительная линия колонки) позволяет одновременно задавать ширину, стиль и цвет разделительной линии колонок, перечисляя их через пробел в любом порядке.

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

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

Синтаксис

column-rule: column-rule-width || column-rule-style || column-rule-color

Значения

Можно указывать через пробел значения свойств column-rule-width, column-rule-style и column-rule-color, задавая тем самым ширину, стиль и цвет разделительной линии колонок в одном месте. При этом значения могут быть указаны в любом порядке. Стиль разделительной линии должен указываться обязательно. Цвет и ширину можно не указывать, тогда браузер использует для них соответствующие значения по умолчанию.

Ссылки

Примеры

HTML Результат BwCodes
<!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;
		}
		
		.p_1{
		column-rule: 3px dashed green;
		}
		
		.p_2{
		column-rule-width: 3px;
		column-rule-style: dashed;
		column-rule-color: green;
		}

	</style>
	
</head>
<body>

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

Пример №1