Heim > Artikel > Web-Frontend > So verwenden Sie das Border-Attribut von CSS3
So verwenden Sie das Border-Attribut von CSS3
- php中世界最好的语言Original
- 2018-03-21 16:47:221468Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie das CSS3-Rahmenattribut verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung des CSS3-Rahmen-Attributs? .
Border in CSS3 ist für uns kein Unbekannter. Wie oft haben wir border:1px durchgehend rot geschrieben... Welche Überraschungen wird uns CSS3 bringen?
In CSS3 verfügt der Rahmen über 4 neue Funktionen
1.Rahmenfarbe(Legen Sie die Rahmenfarbe fest)
2.Border-image (als Rahmen durch das Bild festlegen)
3.Border-radius (Randradius)
4.box-shadow (Schatteneffekt)
Die von mir verwendeten Browserversionen sind: IE8, FireFox10.0.9, Chrome 22.0.1229.94, Safari 5.1.7, Opera 12.50. . . Im Grunde handelt es sich um die neueste Version.
Als wir zuvor einen Rand zu einem p hinzufügen wollten, schrieben wir so:
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
}
</style>
</head>
<body>
<p class='border_test'>常用的边框样式</p>
</body>
</html>
border-color
Da wir die Rahmenfarbe bereits festlegen können, warum brauchen wir dann die Rahmenfarbe? Weil der Rahmen von CSS3 anders ist.
Verwenden Sie border-color, wenn Sie die Rahmenbreite auf X einstellen. Dann können Sie für diesen Rahmen X-Farben verwenden, wobei jede Farbe eine Breite von 1 Pixel aufweist (ps: Wenn Ihre Rahmenbreite 10 Pixel beträgt und Sie nur 5 Farben festlegen, füllt die letzte Farbe die verbleibende Breite unten aus)
Siehe den Code unten für die spezifische Schreibmethode
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
border-color:red blue green black;
}
</style>
</head>
<body>
<p class='border_test'>CSS3 Border-color样式</p>
</body>
</html>
Aber das Ergebnis ist anders als wir dachten.
Wir haben nur 4 gesehen Ränder entsprechen 4 Farben. Sie sind oben, rechts, unten und links.
Wenn wir nur 3 Farben eingeben, entspricht die mittlere Farbe der linken und rechten Seite.
Dann haben wir zuvor gesagt, dass es eine Farbe pro Pixel gibt Wollstoff? Keine Sorge. „Dann können Sie X-Farben für diesen Rand verwenden.“ Da die Randfarbe für die gesamten 4 Ränder gilt, gilt dies nicht für einen bestimmten Rand.
Wenn wir das tun müssen Für einen bestimmten Rand können Effekte eingestellt werden. Sie sind:
border-top-color
border-right-color
border -bottom-color
border-left-color
Also müssen wir den Code
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-border-top-colors:Blue Yellow Red Black Green;
-moz-border-bottom-colors:Blue Yellow Red Black Green;
-moz-border-right-colors:Blue Yellow Red Black Green;
-moz-border-left-colors:Blue Yellow Red Black Green;
}
</style>
</head>
<body>
<p class='border_test'>CSS3 Border-color样式</p>
</body>
</html>
in ändern run Gibt es einen Effekt nach
? Obwohl ich nicht klar sehen kann, scheint es, dass jedes Pixel eine Farbe hat, was es viel praktischer macht, wenn wir wollen Machen Sie einen Farbverlauf. Sie müssen nur die Farbe anpassen
.border_test
{
border:5px solid red;
-moz-border-top-colors:Blue Yellow Red Black Green;
-ms-border-top-colors:Blue Yellow Red Black Green;
-wekit-border-top-colors:Blue Yellow Red Black Green;
-o-border-top-colors:Blue Yellow Red Black Green;
border-top-colors:Blue Yellow Red Black Green;
}
Es wurde jedoch festgestellt, dass der Effekt nur in Firefox angezeigt wurde, d. h. am Rand Das Attribut -border-colors ist nur in Firefox verfügbar, aber nicht mit anderen kompatibel. Schade...
Border-image
border-image verwendet hauptsächlich Bilder, um den Rand zu füllen.
Die Zerlegungsattribute von border-image sind jeweils
border-image-source gibt die URL des Hintergrundbilds von border an
border-image-slice legt die Eigenschaften fest, wie das Bild geschnitten werden soll, ohne Positionierung!
border-image-width definiert den Anzeigebereich von border-image
border-image-repea
Lassen Sie es uns einzeln analysieren.
Border-Image-Source
Dies ist die URL, die das Hintergrundbild des Rahmens angibt, z Beispiel
border-image-source ：url(../images/border.gif);
Dies kann auf „Keine“ eingestellt werden, also kein Hintergrundbild
border-image-slice
设置图片如何切割的属性，（重点理解）他的值是四个数值, 没单位(实际上是已经固定是px了, 注意, 这个值不能是负值或大于图片的尺寸), 例如: border-image-slice:1 2 3 4; 你想得没错, 同样对应的是”上右下左”,将这几个数值, 把背景图片, 切割开来,具体一会再说
border-image-width
定义border-image的width, 这个是定义border-image的显示区域的(这个只是在w3c上描述的, 但在实际测试过, 设置这个属性没有作用, 但是border-width能生效)
border-image-repeat;
repeat有三个值选择
[ stretch | repeat | round ]：拉伸 | 重复 | 平铺 (其中stretch是默认值。)
好了，我们回头来看slice,也就是切割.= =说实话，不知道该怎么讲,还是上图吧.
左上图是一个这样的样式.border-image-slice:10 15 20 25; 他会将图片分割为右上边这样的9宫格图片.
left,top,right,bottom分别是你设置的距离，这一部分会被抽取出来作为边框.
top-left, top-right, bottom-left, bottom-right同样会被抽取出来，与left,top,right,bottom不同的是，他们不会受repeat,stretch,round的影响.
而left,top,right,bottom,则有可能因为拉伸什么的而改变宽度和高度.不知道这样说会不会容易理解点?
下面看代码
<html>
<head>
<style type="text/css">
.border_test
{
-webkit-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-moz-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-o-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-ms-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
display: block;
border-width: 0 12px;
padding: 10px;
text-align: center;
font-size: 16px;
text-decoration: inherit;
color:white;
}
</style>
</head>
<body>
<p class='border_test'>CSS3 Border-image样式</p>
</body>
</html>
效果如下
用的材料图是
同样可惜的是，我这里只有FireFox和Safari出了效果，当然这也不能排序Chrome不能，因为听说有几个版本的可以。
Border-radius
终于到圆角了，感觉花了那么多字去写css3有点怪，因为本来很简单的- -哈
border-radius
参数:半径，不可以是负数，为0的话是直角
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-border-radius:15px;
-ms-border-radius:15px;
-wekit-border-radius:15px;
-o-border-radiuss:15px;
border-radius:15px;
}
</style>
</head>
<body>
<p class='border_test'>CSS3 Border-radius样式</p>
</body>
</html>
效果
圆角效果是比较常见的，而且在FireFox,Chrome,Safari,Opera都支持圆角效果，可惜IE还是只能回老家喝粥.不过据说IE9支持了。
相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
分别对应一个位置，需要注意的是，如果只有一个，会变成4分之1圆角，如果这4个里其中一个为0，那就回变成直角- -这个我也很纳闷.
box-shadow
最后一个，阴影
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-box-shadow:5px 2px 6px black;
-ms-box-shadow:5px 2px 6px black;
-wekit-box-shadow:5px 2px 6px black;
-o-box-shadow:5px 2px 6px black;
box-shadow:5px 2px 6px black;
}
</style>
</head>
<body>
<p class='border_test'>CSS3 Border-shadow样式</p>
</body>
</html>
三个像素值和颜色分别是
阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Was ist der Unterschied zwischen href und src, link und @import
So verwenden Sie die Attributwertvererbung in CSS
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Border-Attribut von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!