简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Code-Analyse von Rändern und Auffüllungen in CSS

Code-Analyse von Rändern und Auffüllungen in CSS

不言
不言Original
2018-08-14 14:19:023742Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Code-Analyse von Rahmen und Auffüllung in CSS. Ich hoffe, dass er für Freunde hilfreich ist.

HTML-Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <link rel="stylesheet" type="text/css" href="Text08.css">
</head>
<body>
     <table border="3">
         <tr>
             <td>EDG流弊</td>
         </tr>
     </table>

     <p id="p1">RNG世界第一伪强队</p>
     <p id="p2">WE提前淘汰，还粉丝60E</p> 
     <p id="p3">EDG国电，世界希望</p> 
</body>
</html>

CSS-Code

td{
    padding-left: 100px;
    padding-bottom: 100px;
    padding-right: 50px;
    padding-top: 50px;
}
/*padding控制着内容距离边距的距离，如果只是padding后面接一个值，就是上下左右都是这个值
这是分开对上下左右进行设置*/

#p1{
    border-top-style: groove;
    border-top-width: 5px;
    border-top-color: deepskyblue;
}
/*控制着主体内容外面一点的边框，同上面一样可以分别控制四个部分border-top-style控制上边框，
如果上面的属性，就是控制上面左右的边框效果是相同的,border-width,border-top-color同上*/

#p2{
    border-radius: 15px;
    width: 400px;
    text-align: center;
    background-color: deepskyblue;
    border: 4px solid fuchsia;
}
/*border-radius增加边框边角的效果 ,border-image是添加边框图片*/

#p3{
    width: 100px;
    height: 100px;
    text-align: center;
    color: red;
    background-color: aqua;
    box-shadow: 10px 10px 5px cornflowerblue;
}
/*box-shadow是边框阴影效果,第一个属性是向右偏移多少，
第二个是向下，第三个是程度，第四个就是阴影的颜色*/

Wirkung:

Verwandte Empfehlungen:

Der Unterschied zwischen Rand-, Rand- und Polstereigenschaften_CSS/HTML

CSS-Details-Überprüfungshinweise- -Padding, Ränder und Ränder_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonCode-Analyse von Rändern und Auffüllungen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html 外边距 内边距 margin padding border
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Code-Analyse von Links und Listen in CSSNächster Artikel：Code-Analyse von Links und Listen in CSS

In Verbindung stehende Artikel

Mehr sehen