【代碼筆記】Web-CSS-CSS Border(邊框)

wupengyu 發布于2019-04-23 11:51 / 2977人閱讀

摘要：邊框參考資料菜鳥教程

一，效果圖。

二，代碼。

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Border(邊框)title>
    <style>
    p.one {
        border-style: solid;
        border-width: 5px;
        border-color: red;
        border-top-style: dotted;
        border-right-style: solid;
        border-bottom-style: dotted;
        border-left-style: solid;
    }
    
    p.two {
        border-style: solid;
        border-width: medium;
        border-color: #98bf21;
    }
    
    p.three {
        border-style: solid;
        border-width: 1px;
    }
    style>
head>

<body>
    <p class="one">Some text.p>
    <p class="two">Some text.p>
    <p class="three">Some text.p>
    <p><b>Note:b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.p>
body>

html>

參考資料:《菜鳥教程》

GPU云服務器云服務器 html邊框代碼 php邊框顏色代碼 html邊框代碼大全 html邊框居中代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1260.html

【代碼筆記】Web-CSS-CSS Table(表格）

一，效果圖。二，代碼。 ? DOCTYPE html> CSS Table表格 table { border-collapse: collapse; width: 100%; } table, th, td { border: 1px solid green;...

sevi_stuo 2019-04-23 11:52 評論0 收藏0
【代碼筆記】Web-CSS-CSS盒子模型

一，效果圖。 ? the picture above is 250px wide.the total width of this element is also 250px. ? 參考資料:《菜鳥教程》

KunMinX 2019-04-23 11:52 評論0 收藏0
【代碼筆記】Web-CSS-CSS 教程

一，效果圖。二，代碼。 DOCTYPE html> CSS 教程 body { background-color: #d0e4fe; } h1 { color: range; text-align: center; } p { fon...

endless_road 2019-04-23 11:55 評論0 收藏0
【代碼筆記】Web-CSS-CSS 語法

一，效果圖。二，代碼。 DOCTYPE html> CSS 語法 p { color: red; text-align: center; } Hello world! this paragraph is styled with css ? 參考資料：《菜鳥教程》

zhangwang 2019-04-23 11:55 評論0 收藏0
【代碼筆記】Web-CSS-CSS id和Class選擇器

一，效果圖。二，代碼。 DOCTYPE html> CSS id和class選擇器 #para1 { text-align: center; color: red; } .center { text-align: center; } p.center...

Pluser 2019-04-23 11:54 評論0 收藏0