Welche drei neuen Randeffekte werden CSS3 hinzugefügt?-Front-End-Fragen und Antworten-php.cn

Drei neue Randeffekte zu CSS3 hinzugefügt: 1. Randbild „border-image“, das dem Rand ein Hintergrundbild hinzufügen kann; 2. Rand abgerundete Ecken „border-radius“, der einen oder mehrere abgerundete Eckeneffekte hinzufügen kann ;3. Randschatten „Box-Shadow“ kann einen oder mehrere Schatten zur Elementbox hinzufügen.

Welche drei neuen Randeffekte werden CSS3 hinzugefügt?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS3 fügt drei neue Randeffekte hinzu. 3

1. Das Randbild „border-image“

border-image kann dem Rand ein Hintergrundbild hinzufügen. Die neuesten Versionen aller gängigen Browser unterstützen jetzt das Border-Image-Attribut.

Syntax:

Welche drei neuen Randeffekte werden CSS3 hinzugefügt?

Beschreibung: Das Attribut „border-image“ muss drei Aspekte des Inhalts definieren.

(1) Bildpfad.

(2) Schnittbreite: die Schnittbreite der vier Seiten, in der Reihenfolge: Oberkante, rechte Kante, untere Kante und linke Kante (im Uhrzeigersinn).

(3) Kachelmethode: Es gibt 3 Werte, nämlich wiederholen, runden und strecken.

In allen Beispielen in diesem Abschnitt verwenden wir das im Bild gezeigte 90px×90px-Bild als Hintergrundbild des Rahmens.

Codebeispiel: Welche drei neuen Randeffekte werden CSS3 hinzugefügt?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:210px;
            height:150px;
            border:30px solid gray;
            border-image:url(img/border.png) 30 repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Nach dem Login kopieren

Die Browservorschau ist wie unten dargestellt.

Welche drei neuen Randeffekte werden CSS3 hinzugefügt? Analyse:

Aus dem Vorschaueffekt können wir erkennen, dass sich die Zahlen 1, 3, 7 und 9 an den 4 Ecken immer noch an den 4 Ecken befinden. Dann werden die 4 Ränder 2, 4, 6 und 8 fortlaufend gekachelt.

Für das Randbild-Attribut fassen wir es wie folgt zusammen:

(1) Beim Erstellen eines Randhintergrundbilds sollten 4 Seiten erstellt werden und der mittlere Teil muss ausgehöhlt werden.

(2) Die Breite jeder Seite des Randhintergrundbilds sollte mit der entsprechenden Randbreite (d. h. border-width) übereinstimmen.

2. Rand abgerundete Ecken „border-radius“

Das Attribut „border-radius“ kann dem Rand einen abgerundeten Eckeneffekt hinzufügen

Das Attribut „border-radius“ definiert den Radius der Ecke des Elements kann durch das CSS-Attribut „border-radius“ erreicht werden. Ein „abgerundeter“ Stil für jedes Element.

Syntax:

border-radius: none　｜　length{1,4} [/ length{1,4}

Nach dem Login kopieren

Jeder Wert kann in Form eines numerischen Werts oder eines Prozentsatzes vorliegen.

Länge/Länge Die erste Länge repräsentiert den Radius in horizontaler Richtung und die zweite repräsentiert den Radius in vertikaler Richtung.

Wenn es sich um einen Wert handelt, sind die vier Werte oben links, oben rechts, unten rechts und unten links gleich.

Wenn es zwei Werte gibt, dann sind oben links und unten rechts gleich und stellen den ersten Wert dar, und oben rechts und unten links sind gleich und stellen den zweiten Wert dar.

Wenn es drei Werte gibt, dann ist der erste Wert oben links einzustellen, und der zweite Wert ist oben rechts und unten links und sie sind gleich, und der dritte Wert ist unten rechts einzustellen.
Welche drei neuen Randeffekte werden CSS3 hinzugefügt?
Wenn es vier Werte gibt, dann ist der erste Wert oben links einzustellen, und der zweite Wert ist oben rechts, der dritte Wert ist unten rechts und der vierte Wert ist unten links einzustellen

Zusätzlich zu den oben genannten Abkürzungen können Sie die vier Ecken auch separat wie folgt schreiben:

border-top-left-radius: //左上角 
border-top-right-radius: //右上角 
border-bottom-right-radius: //右下角 
border-bottom-left-radius: //左下角

Nach dem Login kopieren

sind die Radien in horizontaler bzw. vertikaler Richtung, wenn der zweite Wert weggelassen wird, die Radien in horizontaler Richtung und vertikale Richtungen gleich. border-radius ist nur in den folgenden Browserversionen verfügbar: Firefox4.0+, Safari5.0+, Google Chrome 10.0+, Opera 10.5+, IE9+. Für ältere Browser wird border unterstützt -radius Je nach Browser-Kernel müssen unterschiedliche Präfixe hinzugefügt werden. Beispielsweise muss der Mozilla-Kernel „-moz“ und der Webkit-Kernel „-webkit“ usw. hinzufügen. IE und Opera verfügen jedoch nicht über diese Präfixe private Formate, also um die Kompatibilität zu maximieren Für den Browser müssen wir es wie folgt einstellen:

-webkit-border-radius: 10px 20px 30px; 
-moz-border-radius: 10px 20px 30px; 
border-radius: 10px 20px 30px;

Nach dem Login kopieren

Bitte schreiben Sie das Standardformular nach dem privaten Formular des Browsers.

Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
<style>
img {
border-radius: 30px;
margin: 100px;
}
</style>
</head>
<body>
<img  src="../images/photo.jpg"    style="max-width:90%" alt="Welche drei neuen Randeffekte werden CSS3 hinzugefügt?" >
</body>
</html>

Nach dem Login kopieren

Welche drei neuen Randeffekte werden CSS3 hinzugefügt?

3. Border-Shadow „Box-Shadow“

In CSS können Sie das Box-Shadow-Attribut verwenden, um den Border-Shadow-Effekt zu erzielen kann auf einen oder ein Feld mit mehreren Schlagschatten eingestellt werden.

Syntax

box-shadow: h-shadow v-shadow blur spread color inset;

Nach dem Login kopieren

Mögliche Werte:

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

box-shadow属性的使用

1、水平垂直偏移为0也可以有阴影

如果offset-x或offset-y值为0，则阴影在元素背后，此时给blur-radius值或spread值可以产生阴影效果。

例子：

第一个div通过设置blur-radius产生阴影效果。
第二个div通过设置spread正值产生阴影效果。
第三个div通过设置spread负值产生阴影效果。

但是有一点要注意：扩展阴影必须和阴影模糊半径配合使用。

我个人觉得应该是没有配合使用这一说，但不可能只设置扩展阴影，因为扩展阴影和阴影模糊的取值都可以为正。如果只有扩展阴影的话，会被浏览器当做模糊阴影来解析，所以也可以简单理解为“扩展阴影必须和阴影模糊半径配合使用”，如果只用扩展阴影，可以写成：box-shadow:0 0 0 1px;。

<style type="text/css">
div{
    width: 100px;
    height: 100px;
    margin:50px;
    border: 10px dotted pink;
    display: inline-block;
}
.blur{
        box-shadow: 0 0  20px ;
        /*box-shadow: 0 0  20px green;*/ /*也可以自定义颜色*/
}  
.spread-positive{
        box-shadow: 0 0 20px 5px ;
        /* box-shadow: 0 0 20px 5px green;*/ /*也可以自定义颜色*/
}
.spread-negative{
        box-shadow: 0 0 20px -5px ;
        /* box-shadow: 0 0 20px -5px green;*/ /*也可以自定义颜色*/
}
</style>
<body>
<div class="blur"></div>
<div class="spread-positive"></div>
<div class="spread-negative"></div>
</body>

Nach dem Login kopieren

2、设置水平垂直偏移得到阴影效果

outset情况：水平垂直偏移为0，但是不设置blur和spread，看不到阴影，因为此时box-shadow的周长和border-box一样，所以可以通过设置偏移让阴影显示出来。

inset情况：水平垂直偏移为0，不设置blur和spread，同样看不到阴影，因为此时box-shadow的周长和padding-box一样，同样可通过设置偏移让阴影显示出来。

例子:

<style type="text/css">
div{
    width: 100px;
    height: 100px;
    margin:50px;
    border: 10px dotted pink;
    display: inline-block;
}
.shadow0{box-shadow: 0 0;}  
.shadow1{box-shadow: 1px 1px;}
.shadow10{box-shadow: 10px 10px;}
.inset-shadow0{box-shadow: 0 0 inset;}  
.inset-shadow1{box-shadow: 1px 1px inset;}
.inset-shadow10{box-shadow: 10px 10px inset;}
</style>
<body>
    <div class="shadow0"></div>
    <div class="shadow1"></div>
    <div class="shadow10"></div>
    <div class="inset-shadow0"></div>
    <div class="inset-shadow1"></div>
    <div class="inset-shadow10"></div>
</body>

Nach dem Login kopieren

3、投影方式

投影方式默认是outset，即外部投影，可设置inset让向内投影。

例子：第一个div默认outset，第二个设置inset，第三个同时设置两个阴影可以更好的看到outset和inset的关系，第四个div可以看出inset阴影在背景之上，内容之下。

<style type="text/css">
div{
    width: 100px;
    height: 100px;
    margin:50px;
    border: 10px dotted pink;
    display: inline-block;
    vertical-align: top;
} 
.outset{
    box-shadow: 10px 10px teal;
}
.inset{
    box-shadow: 10px 10px teal inset;    
}
.double{
    box-shadow: 10px 10px teal inset,10px 10px teal;
}
.bg{
    background-color: yellow;
}
</style>
<body>
    <div class="outset"></div>
    <div class="inset"></div>
    <div class="double"></div>
    <div class="inset bg">inset阴影在背景之上，内容之下</div>
</body>

Nach dem Login kopieren

4、如果元素同时指定border-radius属性，则阴影呈现相同的圆角。

<style type="text/css">
 div{
 width: 100px;
    height: 100px;
    margin:50px;
    border: 10px dotted pink;
    display: inline-block;
    border-radius: 50px;
 }
.shadow{
    box-shadow: 0 0  10px 10px green;
}
</style>
<body>
<div class="shadow"></div>
</body>

Nach dem Login kopieren

（学习视频分享：css视频教程、web前端）

Das obige ist der detaillierte Inhalt vonWelche drei neuen Randeffekte werden CSS3 hinzugefügt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!