首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS 边框属性总结

什么是边框 2. CSS边框属性 3. border 属性的几种书写方式 4. 边框倒角(border-radius) 1....CSS边框属性 ---- 基本属性(border):边框宽度、边框样式、边框颜色 边框倒角(border-radius) 边框阴影(box-shadow) 轮廓属性(outline) 3. border...最简洁,也是最常用的方式 border: width style color; 简写方式的属性值顺序可以打乱 边框样式没有默认值,不能省略,否则看不到边框 宽度和颜色都有默认值可以省略,宽度默认为medium...给四个方向的边框设置不同的属性值 border-属性:上 右 下 左; border-width: 上 右 下 左; border-style: 上 右 下 左; border-color: 上 右...给某一个边框单独设置某个属性 border-方向-属性: 属性值; border-top-width: 5px; border-right-style: solid; 4.

2.2K20

css边框属性(二)

二、表格边框间距border-spacing 我们知道表格加入边框默认情况下是如下图那样的: image.png 我们在上一节讲解了如何合并表格边框(消除表格边框间距)。...但是在实际开发中,我们有可能要设置一下表格边框的间距。 在CSS中,我们使用border-spacing属性来定义表格边框间距。...border-spacing属性跟上节课学到的border-collapse属性一样,只需要在table元素设置就可以生效,没必要在th、td这些元素中设置,造成代码冗余。...在CSS中,我们使用caption-side属性来定义表格标题的位置。...语法: caption-side:属性值; 说明: caption-side属性取值如下: 表1 caption-side属性取值 caption-side属性值 说明 top 默认值

2K30
您找到你想要的搜索结果了吗?
是的
没有找到

WPF 形状的 StrokeThickness 属性边框的影响

在 WPF 中,形状可以使用 StrokeThickness 定义边框的粗细,而边框和形状元素的大小的关系受到这个属性的影响。...换句话说就是上面代码设置矩形宽度高度是 100 那么矩形无论设置 StrokeThickness 属性是多少,都不会影响视觉上的矩形宽度和高度 ?...我比较推荐 WPF 的这个设计,固定了矩形的宽度和高度,那么边框的大小是向内的。...因为这样设计起来比较好计算 而 SVG 的行为和 WPF 的不相同,在 SVG 里面是使用矩形的边框作为中心,向两边填充。...设计器上的蓝色的圆形是形状的 RenderedGeometry 属性,这个属性是一个 Geometry 类型 使用 Geometry 类型进行绘制的时候,设置的 Pen 里面的 Thickness 的绘制方式使用的是从

2.5K20

CSS——边框

定义 边框(Border)属性是对HTML元素的边框进行定义的CSS属性。...概述 通过边框的样式设置,给元素增加更丰富的外观 边框的设置包含以下内容: 边框的类型 边框的尺寸 边框的前景背景 圆角边框 列表 元素 描述 border border 属性是规定各种单独的边界属性的简写属性...border-left border-left 该属性规定元素的左边框属性。 border-left-color border-left-color 该属性是一个用于规定元素的左边框的颜色。...border-left-width border-left-width 该属性是一个元素的左边框的宽度。 border-right border-right 该属性是元素的右边框属性。...border-image border-image 该属性用作给元素的边框添加背景图片。使用该属性时,会替换掉 border-style 属性所设置的边框样式。

3.8K20

【CSS】盒子边框 ② ( 盒子边框单独指定语法 )

border-top-style 属性设置 ; 上边框宽度 : 通过 border-top-width 属性设置 ; 上边框颜色 : 通过 border-top-color 属性设置 ; 总体写法 :...通过 border-top 属性设置 ; 下边框 : 下边框样式 : 通过 border-bottom-style 属性设置 ; 下边框宽度 : 通过 border-bottom-width 属性设置...; 下边框颜色 : 通过 border-bottom-color 属性设置 ; 总体写法 : 通过 border-bottom属性设置 ; 左边框 : 左边框样式 : 通过 border-left-style...属性设置 ; 左边框宽度 : 通过 border-left-width 属性设置 ; 左边框颜色 : 通过 border-left-color 属性设置 ; 总体写法 : 通过 border-left...属性设置 ; 右边框 : 右边框样式 : 通过 border-right-style 属性设置 ; 右边框宽度 : 通过 border-right-width 属性设置 ; 右边框颜色 : 通过

3K20

【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )

与 内容 之间 ; 边框 Border : 边框 包裹 内边距 , 在 外边距 与 内边距 之间 , 边框 1 像素 ; 外边距 Margin : 最外层 元素 , 与其它盒子的距离 ; 三、盒子边框...边框设置语法 边框设置语法 : 设置边框宽度 : border-width 属性值为 像素值 ; border-width: 10px; 设置边框样式 : border-style 属性值 设置边框样式..., 可设置的值由如下选择 : none : 默认选项 , 忽略边框宽度 ; solid : 设置 实线边框 ; dashed : 设置 虚线边框 ; dotted : 设置 点线边框 ; border-style...-点线 ; 边框样式-虚线 : 边框样式-实线 : 3、边框设置综合写法 盒子边框设置综合写法 : 在 border 属性 后设置 边框宽度 边框样式 边框颜色 三个值 , 使用空格隔开..., 这三个值没有顺序 ; border : border-width border-style border-color 之前的边框需要写 3 行代码 , 设置 3 个属性 , /* 边框宽度

3.1K20

【CSS】盒子边框 ③ ( 设置表格细线边框 | 合并相邻边框 border-collapse: collapse; )

文章目录 一、设置表格细线边框 1、表格示例 2、合并相邻边框 3、完整代码示例 一、设置表格细线边框 ---- 1、表格示例 给定一个 HTML 结构中的表格 , 默认样式如下 : 设置表格细线边框 <base...为 table 设置边框 : table { border: 1px solid blue; } 显示效果 : 上述效果只有表格的边框 , 内部的单元格的边框没有设置 , 为 表头单元格...单元格 之间 的边框 , 单元格 与 表格 之间 的边框 , 出现了重叠 , 每个重叠处都有 两条线 ; 设置 border-collapse: collapse; CSS 样式 , 可以 将 相邻的边框...合并在一起 , 合并边框后的效果 : 3、完整代码示例 完整代码示例 : <!

2.7K20

table边框设置

table边框设置 一、表格的常用属性 基本属性有:width(宽度)、height(高度)、border(边框值)、cellspacing(表格的内宽,即表格与tr之间的间隔)、 cellpadding...)和table的背景色来实现 2、实现方法二: 实现原理:利用table的border,bordercolor="#a0c6e5"实现table的边框,但是此时的边框太粗, 这时就可以用到style属性里的...border-collapse:collapse样式 二、表格内部分隔线的属性 起作用的是rules这个参数,它有三个值(cols,rows,none),当rules=cols时,表格会隐藏横向的分隔线...a a b b b c c c 这是隐藏了纵向分隔线的表格,即rules=rows a b c a b c a b c 这是隐藏了所有内部分隔线的表格,即rules=none 三、表格外部分隔线的属性...注意:只对表格的外边框起作用,对内部边、线不起作用 只显示上边框只显示下边框 只显示左、右边框 只显示上、下边框 只显示左边框 只显示右边框 不显示任何边框 看一下对比效果吧

2.8K50
领券