8.css边框_html/css_WEB-ITnose
其实,与其将css盒模型称为是一个盒子,我更愿意将其称为卡片,或者是图画。因为相对于盒子的三维特效,网页的元素更像是二维的图画。而我们之间对元素尺寸之类的调整,更像是对画布的调整。
但是,就像我可以为一幅画配一个画框一样,我也可以为元素设置一个边框。
属性 | 值 | 说明 | CSS 版本 |
border-width | 长度值 | 设置边框的宽度,可选 | 1 |
border-style | 样式名称 | 设置边框的样式,必选 | 1 |
border-color | 颜色值 | 设置边框的颜色,可选 | 1 |
这三个属性值,只有 border-style 是必须声明,才可以出现边框。而其他两个属性会出现默认值,宽度默认为3px,颜色默认为黑色。
/*简单设置*/div { border-style: solid; }/*完整设置*/div { border-style: solid; border-width: 2px; border-color: red; }
注意:当我为画镶嵌一个画框后,把它拿到美术馆(也就是网页)去展览的是时候,美术馆里的参观者看到的画的大小就不再是画布的大小了,而是画布加上边框的。而这里边框的设置是针对其中的一条边的,也就是真正的宽度和高度应该变成:画布的+边框一条边的*2。
下面总结了各属性的详细用法。
1.边框的宽度
值 | 说明 |
长度值 | CSS 长度值:比如 px、em 等 |
百分数 | 直接设置百分数:1、2、3 等 |
thin | 使用长度名称的预设宽度。这三个值的具体意义由浏 览器来定义,从小到大依次增大 |
medium | |
thick |
2.边框的样式
值 | 说明 |
none | 没有边框 |
dashed | 破折线边框 |
dotted | 圆点线边框 |
double | 双线边框 |
groove | 槽线边框 |
inset | 使元素内容具有内嵌效果的边框 |
outset | 使元素内容具有外凸效果的边框 |
ridge | 脊线边框 |
solid | 实线边框 |
3.边框的颜色
边框的颜色其实没有什么特别的值,其设置方法可以参考css的颜色这篇博客。
4.分别定制
以上的设置方法都是针对四条边的,相当于买了一套边框。但是,我们可以按照自己的需求分别对四条边进行定制。
属性 | 说明 | CSS 版本 |
border-top-width border-top-style border-top-color | 定义顶端 | 1 |
border-bottom-width border-bottom-style border-bottom-color | 定义底部 | 1 |
border-left-width border-left-style border-left-color | 定义左侧 | 1 |
border-right-width border-right-style border-right-color | 定义右边 | 1 |
/*只要其中的一条边*/div { border-top-style: solid; border-top-width: 10px; border-top-color: red; }
5.简写设置
为了提高销量,商家还提高了快速下单服务,当四条变都一致,那么没必要分写成三句样式,直接通过简写即可:
属性 | 值 | 说明 | CSS 版本 |
border | <宽度> <样式> <颜色> | 设置四条边的边框 | 1 |
border-top | 只设置上边框 | ||
border-bottom | 只设置下边框 | ||
border-left | 只设置左边框 | ||
border-right | 只设置右边框 |
/*简写形式四条边设置 */div { border: 10px solid red; }
6.圆角边框
虽然商家提供了各种样式的边框,但是这些边框都是方方正正的,为了满足顾客的要求,商家又去拿了一批新货,开始提供圆角边框了。
属性 | 值 | 说明 | CSS 版本 |
border-radius | 长度值或百分数 | 四条边角 | 3 |
border-top-left-radius | 左上边角 | ||
border-top-right-radius | 右上边角 | ||
border-bottom-left-radius | 左下边角 | ||
border-bottom-right-radius | 右下边角 |
/*设置圆角矩形*/div { border: 10px solid red; border-radius: 10px; }/*四条边分别设置*/div { border: 10px solid red; border-radius: 10px 20px 30px 40px; }

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

GitePages statische Website -Bereitstellung fehlgeschlagen: 404 Fehlerbehebung und Auflösung bei der Verwendung von Gitee ...

Der ad-axis-Position adaptive Algorithmus für Webanmerkungen In diesem Artikel wird untersucht, wie Annotationsfunktionen ähnlich wie Word-Dokumente implementiert werden, insbesondere wie man mit dem Intervall zwischen Anmerkungen umgeht ...

Um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken auf das Bild zu erreichen, müssen viele Webdesigns einen interaktiven Effekt erzielen: Klicken Sie auf ein bestimmtes Bild, um die Umgebung zu machen ...

HTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.
