列表边框column-rule

最新推荐文章于 2024-01-14 17:41:09 发布
最新推荐文章于 2024-01-14 17:41:09 发布
阅读量650 收藏
点赞数

column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。

语法规则：

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

取值说明：

属性值

属性值说明

column-rule-width

类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。

column-rule-style

类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。

column-rule-color

类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色)

例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框，代码为：

column-rule: 2px dotted green;

任务

在CSS编辑器第19-23行输入正确代码，为栏目列设置一个3px的灰色实体边框线。注意浏览器的兼容性，效果如下图所示：

<!doctypewww.dztcsd.com/ html>
<html>
<head>
<meta charset="utf-8">
<title>列表边框column-rule</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="columns">
  <h2>我要分列显示</h2>
  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
</div>
</body>
</html>

大志天成119
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【CSS3】列表边框column-rule
O(∩_∩)O
02-25 717
column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。 语法规则： column-rule:|| 取值说明： 属性值 属性值说明 column-rule-wi
列表边框css,css--背景，边框，列表，链接等属性
weixin_39574928的博客
08-03 180
浏览器支持IE为-ms-，Firefox为-moz-,chrome和iPhone自带浏览器为-webkit-，Opera为-o-1.背景：[background-color]CSS属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent" 二者选其一[background-image]CSS background-image 指定在元素...
css列表、边框、背景属性
qq_46397944的博客
03-23 202
css列表、边框、背景属性 <!-- 列表属性 --> 属性：list-style-image:url() 添加列表图片，位置间距好多问题解决很麻烦 list-style-position:outside列表符号在内容区以外显示即在li外 inside列表符号在内容区以内显示即在li内和li是一个整体 list-style-type：c...
CSS 常用 字体 文本 列表 边框属性
houyanhua1的专栏
10-29 1035
CSS尺寸属性 px,em ,%（相对单位） font-size:25不加单位的数字毫无意思 px像素，相对单位。和屏幕的分辨率有关。 em：一个字体高（1倍字体高）,2em(当前默认字体的2倍) %,百分比。相对单位。相对于当前默认值的百分比。 浏览器的默认字体大小为16px. CSS字体属性 font-family: 设置字体，黑体=>simhei 如：font-family
【CSS从入门到入土系列】—— 列表边框属性专题
欢迎来到我的世界
02-08 1243
核心知识点：去掉列表标识符、为容器设置边框、可以动手实践的小作业
CSS3的column-fill属性对齐列内容高度的用法详解
09-24
- `column-rule`：定义列之间的边框样式。 - `column-width`：定义每列的宽度。 - `-moz-column-width`, `-webkit-column-width`, `-o-column-width`, `-ms-column-width`：浏览器前缀版本的`column-width`，用于旧...
1.09 css3-布局
10-07
"css3 布局" css3 中的多列布局模块提供了一种新的...通过使用 column-count、column-gap、column-rule-style 和 column-rule-width 等属性，可以灵活地控制列的数量、间隔、样式和宽度，提高网站的可读性和用户体验。
浅谈CSS 多栏布局（Multi-Columns Layout）
09-22
2. `column-rule`与`column-gap`：`column-rule`用来设置列之间的边框，包括宽度、样式和颜色。`column-gap`则控制列之间的间距。可以通过调整这两个属性来美化布局。 3. `column-span`：此属性允许元素跨多列显示...
CSS3设置多列显示样式2.pdf
07-10
- `column-rule-style`：定义列边框的样式，其值与`border-style`属性的取值相同，包括 `none`、`hidden`、`dotted`、`dashed`、`solid`、`double`、`groove`、`ridge`、`inset` 和 `outset`。 二、案例解析 下面...
第28章 CSS3多列布局
08-11
`column-rule`属性则用来定义列之间的边框，包括边框的宽度（`column-rule-width`）、样式（`column-rule-style`）和颜色（`column-rule-color`）。 3. **`column-fill`属性** `column-fill`决定内容如何填充到列...
HTML--CSS--边框、列表、表格样式
最新发布
weixin_44517278的博客
01-14 2235
属性：border-width 边框宽度border-style 边框外观border-color 边框颜色需要同时设定三个属性。
前端学习：CSS核心属性--列表和边框属性
hao2580的博客
08-06 276
列表和边框属性学习
CSS属性之边框与列表
回忆的夏天
09-04 950
本篇，首先来介绍的是边框属性，内容比较多，还基本还是很简单的。 代码演示：<html> <head> <title>CSS属性之边框</title> <meta charset="utf-8"> <style type="text/css"> div{ width:50px;
CSS3多列属性--column-rule
AsaZyf的博客
11-13 268
code： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;column-rule&lt;/title&gt; &lt;style type="text/css"&gt; body
CSS之Multi-columns的column-gap和column-rule
tian361zyc的博客
07-05 851
css
CSS3 多列布局的column-gap 和 column-rule属性
歪脖先生的博客
02-24 4106
多列布局在CSS3之前，要让Web页面像报纸、杂志的排版一样，呈现多列布局，你必须将内容拆分到不同的标签中，然后分别设定样式，或者使用浮动和绝对定位，或者使用JS脚本等，并且实现起来也很困难。CSS3新增了多列布局特性，彻底改变了这样的局面，这种新语法能够让页面内容轻松地分布到多列网格中，实现类似报纸、杂志一样的排版效果，而无需任何额外的标签。多列布局相关的核心属性包括列宽和列数、列间隙和边框、分...
十天精通CSS3(10)
weixin_34007879的博客
03-08 209
多列布局——Columns 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知...
columns网页布局
胡图图图
01-29 1578
网页布局是指在网页中如何对标题、导航栏、主要内容、表单等各种构成要素进行一个合理的编排。 在css3前主要使用float和position属性进行页面布局，但是使用这些属性也存在着一些缺点。比如多栏中如果元素的内容高度不一致则底部很难对齐，会存在空白。 在css3中增加了一些新的布局方式。使用新的布局方式，可以更加快捷方便的来编排更为复杂的页面。css3中的Mulitiple Columns多
css学习笔记
DaZhi_boy的博客
01-14 421
1.css的长度单位 1）px 2) em 2.css的选择器 1）常用选择器 *标签 span *id #id *类 .class *关联 #div1 span div1中的span标签 *组合 div,h1,p,apan 关联的都选，逗号隔开 2）基本选择器 :first-child :first-letter :first-line :last-child :nth-child 3）层级选择
用column-count将元素文字分成两列，两列之间怎么加一条边框
05-26
你可以使用 `::before` 或 `::after` 伪元素来实现两列之间的边框效果。具体实现方法如下： ```css .container { column-count: 2; column-gap: 20px; /* 列间距 */ position: relative; /* 开启定位，为伪元素定位做准备 */ } .container::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); /* 计算左边界位置 */ width: 2px; /* 边框宽度 */ background-color: #ccc; /* 边框颜色 */ } ``` 在以上代码中，我们使用 `::before` 伪元素创建了一个宽度为 `2px` 的垂直边框，并将其定位到容器的中心位置。左边界位置计算使用了 `calc()` 函数，实际上是将容器的宽度除以 2 再减去边框宽度的一半。 需要注意的是，以上代码可能会因为某些浏览器的兼容性问题而无法正常工作。如果你需要在不同的浏览器中使用此效果，可以考虑使用其他的方法，比如使用 JavaScript 动态计算边框位置等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值