css零到一基础教程020：CSS 简写边框属性

最新推荐文章于 2024-04-10 23:15:12 发布

慕容屠苏

最新推荐文章于 2024-04-10 23:15:12 发布

阅读量236

点赞数

CC 4.0 BY-SA版权

分类专栏： css零到一文章标签： css html 前端

本文链接：https://blog.csdn.net/kerryqpw/article/details/123590386

css零到一专栏收录该内容

98 篇文章 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本文主要介绍CSS中的边框简写属性，通过实例展示了如何使用该属性来缩减代码，便于快速设置元素的左右上下边框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS Border - 简写属性

就像您在上一章中所见，处理边框时要考虑许多属性。

为了缩减代码，也可以在一个属性中指定所有单独的边框属性。

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color

实例

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 5px solid red;
}
</style>
</head>
<body>

<h1>border 属性</h1>

<p>此属性是 border-width、border-style 以及 border-color 的简写属性。</p>

</body>
</html>

您还可以只为一个边指定所有单个边框属性：

左边框

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

慕容屠苏

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

css零到一基础教程021：CSS 圆角边框

kerryqpw的博客

03-19

676

CSS 圆角边框 border-radius属性用于向元素添加圆角边框： <!DOCTYPE html> <html> <head> <style> p.normal { border: 2px solid red; } p.round1 { border: 2px solid red; border-radius: 5px; } p.round2 { border: 2px solid red; border-radiu..

css零到一基础教程022：CSS 外边距

kerryqpw的博客

03-19

347

实例： <!DOCTYPE html> <html> <head> <style> div { margin: 70px; border: 1px solid #4CAF50; } </style> </head> <body> <h1>CSS 外边距</h1> <div>本元素的外边距为 70 像素。</div> </body> </html

参与评论您还未登录，请先登录后发表或查看评论

边框(border)的CSS简写方法

wlddh2010的专栏

04-11

2867

边框(border)先介绍一下border的基本属性：border-width:数字+单位; border-style: none || hidden || dashed || dotted || double || groove || inset || outset || ridge || solid ; border-color: 颜色 ; border可以按照width、style和

CSS 简写边框属性

风花雪月，品霖千年之情

03-25

9140

CSS 简写边框属性

css---边框简写属性

chen_zan_yu_的博客

04-19

1016

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; backgro...

CSS border边框简学

qq_46582421的博客

04-15

850

先介绍这些属性的基础知识： border 简写属性，用于把针对四个边的属性设置在一个声明。 border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 border-bott...

css border属性简写

08-05

3074

CSS的border属性的定义： Value: [ || || ] | inherit Initial: see individual properties Applies to: all elements Inherited: no Percentages: N/A Media: visual Computed value: see individual p

css零到一基础教程025：CSS 内边距

kerryqpw的博客

03-19

303

CSS 内边距 CSSpadding属性用于在任何定义的边界内的元素内容周围生成空间。通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。 Padding - 单独的边 CSS 拥有用于为元素的每一侧指定内边距的属性： padding-top padding-right padding-bottom padding-left 所有内边距属性都可以设置以下值： length- 以 px、pt、cm 等单位指定内边距 % - 指...

css零到一基础教程024：CSS 外边距合并

kerryqpw的博客

03-19

147

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：实例： <h.

border英文缩写_CSS 的简写属性

weixin_30980025的博客

12-31

935

定义简写属性是让你同时设置其他几个 CSS 属性值的 CSS 属性。使用简写属性，Web 开发人员可以编写更简洁、更具可读性的样式表，节省时间和精力。CSS 规范把简写属性定义为作用于同一主题的一组属性。比如 CSS 的background属性就是一个简写属性，它可以定义background-color、background-image、background-repeat和background-p...

37 边框简写属性 1 边框的默认值2 border 边框的简写

09-26

246

1 2 转载于:https://www.cnblogs.com/anvivi/p/9708364.html

CSS 基础：border 的 3 个基础属性和简写方法

最新发布

u013179804的博客

04-10

1万+

css的一些简写规则：

xinrui2009的专栏

06-02

310

css的一些简写规则： 1.颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#663399可以缩写为#639;2.盒尺寸通常有下面四种书写方法:property:value1; 表示所有边都是一个值value1； property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2

常用CSS缩写语法总结

weixin_33859504的博客

02-14

156

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：　　颜色　　16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：　　#000000可以缩写为#000;#336699可以缩写为#369; 　　盒尺寸　　通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1； property:value1 valu...

【 CSS 边框和轮廓属性 Border&Outline】

Hey_Coder

12-04

7471

CSS 边框属性（Border 和 Outline）边框属性须知 1.样式最优先设置任何边框属性，必须先设置边框样式先声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。主要内容边框宽度边框颜色边框样式边框圆角边框图像边框阴影轮廓所有边框属性 IE7- 不支持值 “inherit”。边框颜色 IE6-...

css 的缩写形式,CSS样式中的几种缩写方式

weixin_32273747的博客

08-04

1154

1、background缩写方式background : background-color | background-image | background-repeat | background-attachment | background-position缩写代码：background: #aaaaaa url(../image/logo..jpg) no-repeat fixed -50px...

margin和border简写的顺序

博客之家

04-18

9931

margin、borde和paddingr简写的顺序盒子弧度：border-radius

border缩写属性

qq_43812504的博客

12-07

1819

border缩写属性：设置的属性分别（按顺序）：border-width, border-style,和border-color. 如果上述值缺少一个没有关系，例如border：＃FF0000;是允许的。 border其他属性用法：单个边的复合样式 border-left:thick double #ff0000; 单个边的某一具体样式： border-bottom-color:red; border-bottom-width:2px; border-bottom-style:solid;

css border

axvj56935的博客

08-19

314

Border模型 ...

CSS常用简写样式

qq_37916164的博客

02-22

947

1：文本 1)：文字简写 // 倾斜粗细字号/行高字体 font: italic bold 1em/1.5 'Courier New', Courier, monospace; 2：盒子模型 1)：内外外边距 padding/margin一个值：上下左右 padding/margin两个值：上下左右 padding/margin三个值：上左右下 padding/margin四个值：上下左右 2)：边框轮廓线简写 //线条样式粗细颜色 border..