CSS3 열 규칙 사용법

css3 열 규칙 사용법:
column-rule 속성은 열 사이의 테두리 스타일을 지정하는 데 사용되며 이는 테두리 속성과 다소 유사합니다. 그러나 테두리와는 달리 두 열 사이의 위치에만 작용하고 공간을 차지하지 않습니다.
구문 구조:

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

이 속성은 복합 속성입니다.
매개변수 분석:
(1).column-rule-width: 테두리 너비를 지정합니다. 기본값은 "medium"입니다.
(2).column-rule-style: 테두리 스타일을 지정합니다. 기본값은 "none"입니다.
(3).column-rule-color: 테두리 색상을 지정합니다. 기본값은 전경 색상 값입니다.
브라우저 지원:
(1).
(2) Google Chrome은 이 속성을 지원합니다.
(5) Safari 브라우저는 이 속성을 지원합니다.
Firefox 브라우저는 -moz를 추가해야 합니다. - 접두사
Google 및 Safari 브라우저는 -webkit- 접두사를 추가해야 합니다.
코드 예:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
.columns {
  border: 1px solid green;
  width: 600px;
  margin: 20px auto;
 
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;
 
  -moz-column-rule: 2px solid blue;
  -webkit-column-rule: 2px solid blue;
  column-rule: 2px solid blue;
}
</style>
</head>
<body>
<div class="columns">
互联网的出现,极大的促进了信息的交流,随着步伐的前进,网站的交互需求越来越多,但是受限于当时的软硬件条件,
特别是网络环境的限制,非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输,
后来改名为JavaScript。随着JavaScript在互联网上的成功运用,微软公司也随之开发了自己的"JavaScript"名叫JScript,
于是在互联网上就出现多种标准的"JavaScript"脚本语言,如果任其发展下去,那么将会严重影响互联网发展,
于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会(ECMA),
并最终推出了ECMA-262标准,定义了名为ECMAScript的脚本语言,从此以后浏览器都将ECMAScript作为JavaScript的实现基础。
</div>
</body>
</html>

위 코드는 두 열 사이의 관련 스타일을 설정합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
.columns {
  border: 1px solid green;
  width: 600px;
  margin: 20px auto;
 
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;
 
  -moz-column-rule: 40px solid blue;
  -webkit-column-rule: 40px solid blue;
  column-rule: 40px solid blue;
}
</style>
</head>
<body>
<div class="columns">
互联网的出现,极大的促进了信息的交流,随着步伐的前进,网站的交互需求越来越多,但是受限于当时的软硬件条件,
特别是网络环境的限制,非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输,
后来改名为JavaScript。随着JavaScript在互联网上的成功运用,微软公司也随之开发了自己的"JavaScript"名叫JScript,
于是在互联网上就出现多种标准的"JavaScript"脚本语言,如果任其发展下去,那么将会严重影响互联网发展,
于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会(ECMA),
并最终推出了ECMA-262标准,定义了名为ECMAScript的脚本语言,从此以后浏览器都将ECMAScript作为JavaScript的实现基础。
</div>
</body>
</html>

이 테두리는 공간을 차지하지 않습니다. 다른 관련 속성을 변경하지 않고 원하는 대로 양쪽 끝으로 확장됩니다

지속적인 학습
||
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style type="text/css"> .columns { border: 1px solid green; width: 600px; margin: 20px auto; -webkit-column-count:2; -moz-column-count:2; column-count:2; -moz-column-rule: 40px solid blue; -webkit-column-rule: 40px solid blue; column-rule: 40px solid blue; } </style> </head> <body> <div class="columns"> 互联网的出现,极大的促进了信息的交流,随着步伐的前进,网站的交互需求越来越多,但是受限于当时的软硬件条件, 特别是网络环境的限制,非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输, 后来改名为JavaScript。随着JavaScript在互联网上的成功运用,微软公司也随之开发了自己的"JavaScript"名叫JScript, 于是在互联网上就出现多种标准的"JavaScript"脚本语言,如果任其发展下去,那么将会严重影响互联网发展, 于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会(ECMA), 并最终推出了ECMA-262标准,定义了名为ECMAScript的脚本语言,从此以后浏览器都将ECMAScript作为JavaScript的实现基础。 </div> </body> </html>
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~