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

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

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

Das offizielle Konto -Webseite aktualisiert Cache, dieses Ding ist einfach und einfach und es ist kompliziert genug, um einen Topf davon zu trinken. Sie haben hart gearbeitet, um den offiziellen Account -Artikel zu aktualisieren, aber der Benutzer hat die alte Version immer noch geöffnet. Schauen wir uns in diesem Artikel die Wendungen und Wendungen und wie man dieses Problem anmutig ansehen. Nach dem Lesen können Sie sich leicht mit verschiedenen Caching -Problemen befassen, sodass Ihre Benutzer immer den frischesten Inhalt erleben können. Sprechen wir zuerst über die Grundlagen. Um es unverblümt auszudrücken, speichert der Browser oder Server einige statische Ressourcen (wie Bilder, CSS, JS) oder Seiteninhalte, um die Zugriffsgeschwindigkeit zu verbessern. Wenn Sie das nächste Mal darauf zugreifen, können Sie ihn direkt aus dem Cache abrufen, ohne ihn erneut herunterzuladen, und es ist natürlich schnell. Aber dieses Ding ist auch ein zweischneidiges Schwert. Die neue Version ist online,

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Dieser Artikel zeigt einen effizienten PNG -Grenzzusatz zu Webseiten mithilfe von CSS. Es wird argumentiert, dass CSS im Vergleich zu JavaScript oder Bibliotheken eine überlegene Leistung bietet, um zu beschreiben, wie die Randbreite, Stil und Farbe für subtile oder herausragende Effekte angepasst werden können

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
