上海HTML5開發(fā)培訓機構(gòu)大咖分享html虛線邊框設(shè)置教程

習HTML時有時候我們需要用代碼設(shè)置邊框或虛線邊框的樣式，那該怎么設(shè)置呢？下面上海非凡進修學院HTML5開發(fā)培訓機構(gòu)大咖分享下html虛線邊框設(shè)置教程，會對幾個不同標簽加虛線邊框效果樣式，同學們可以根據(jù)示例靈活掌握與應(yīng)用到自己DIV+CSS布局中。

為了對html不同標簽加邊框虛線，我們選擇幾個常用標簽對齊設(shè)置邊框虛線效果。

1、html常用標簽

div標簽

span

ul li

table tr td

2、實例用到CSS屬性單詞

border

width

height

3、實現(xiàn)虛線的CSS重點介紹

border為邊框?qū)傩裕绻獙崿F(xiàn)對象邊框效果，要設(shè)置邊框?qū)挾取⑦吙蝾伾⑦吙驑邮剑▽嵕€還是虛線）

border:1px dashed #F00 這個就是設(shè)置邊框樣式寬度為1px，虛線，虛線為紅色。

4、實例描述

我們對以上幾個標簽設(shè)置相同寬度、相同高度、邊框效果。

5、HTML代碼示例：

以上示例對html中不同標簽設(shè)置相同的樣式，包括相同邊框虛線。

上海HTML5開發(fā)培訓機構(gòu)大咖提示邊框三個樣式

通常我們可以對邊框設(shè)置寬度（厚度）、邊框樣式、邊框顏色這三個屬性與參數(shù)。

1）、邊框顏色：border-color:#000

2）、邊框厚度（寬度）：border-width:1px

使用數(shù)字+單位設(shè)置邊框厚度寬度，如1px(邊框厚度寬度為1像素)，邊框必須為正數(shù)字，大于0的數(shù)值。否則設(shè)置邊框border樣式無效。

3）、border邊框樣式：border-style:solid

上海HTML5開發(fā)培訓機構(gòu)大咖提示：邊框border樣式值如下：

none :無邊框。與任何指定的border-width值無關(guān)

hidden : 隱藏邊框。IE不支持

dotted : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線（常用）

dashed : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線（常用）

solid :實線邊框（常用）

double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值

groove : 根據(jù)border-color的值畫3D凹槽

ridge :根據(jù)border-color的值畫菱形邊框

inset : 根據(jù)border-color的值畫3D凹邊

outset : 根據(jù)border-color的值畫3D凸邊

人可能會疑惑，我為什么專門用一節(jié)內(nèi)容來說邊框和圓角。其實，不為別的，只為它們在開發(fā)中，在Web系統(tǒng)中，在手機頁面中，太常用了。有邊框的頁面，讓人耳目一新，一目了然；有圓角的內(nèi)容，讓人賞心悅目，心曠神怡。說的有點夸張了，就這么著吧。

邊框(border)一般為長方形形狀，有上下左右四條邊，CSS邊框?qū)傩栽试S你指定一個元素邊框的樣式和顏色。CSS的圓角(border-radius)方法，可給任何元素制作 "圓角"效果。

11.1 邊框逼格

在CSS中，你可以通過border和其延伸的，如border-style，來實現(xiàn)邊框的效果。上邊框相關(guān)的有border-top-style樣式、border-top-color顏色、border-top-width寬度和組合了它們的border-top。下、左右邊框類似，換成對應(yīng)的單詞即可。

邊框樣式(border-style)常用的有dotted(點線)、dashed(虛線)、solid(實線)、double(雙邊框)這四種，不常用的有g(shù)roove(3D溝槽)、ridge(3D脊邊)、inset(3D嵌入)和outset(3D突出)。

/* --------在樣式表文件中---------- */
/*4條邊框一起設(shè)置*/
.four-border {
    width: 800px;
    border: 2px solid darkgreen;;
}

/*四條邊框可個性化*/
.four-style {
    width: 800px;
    /* 上、右、下、左*/
    border-width: 1px 2px 3px 4px;
    /*上、右左、下*/
    border-style: solid dashed double;
    /*上下和右左*/
    border-color: darkgreen coral;
}

/*單條邊框設(shè)置*/
.one-style {
    width: 800px;
    border-top: 1px groove orangered;
    border-bottom-width: 5px;
    border-bottom-style: inset;
    border-bottom-color: darkgreen;
}

HTML文件內(nèi)容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>邊框逼格</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
    border統(tǒng)一設(shè)置四條邊框<br/>
    順序為：border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
    四條邊框一起設(shè)置，風格可不同<br/>
    順序為:上、右、下、左。<br/>
    1. 只有一個值(如：border-width:2px)：表示4條邊框全部一樣；<br/>
    2. 有兩個值(如：border-width:2px 3px)：表示上下和右左;<br/>
    3. 有三個值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
    4. 有四個值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
    單獨一天邊框進行設(shè)置<br/>
    border-top：頂部寬度、樣式、顏色，一起設(shè)置<br/>
    border-top-width:上邊框?qū)挾龋?lt;br/>
    border-top-style:上邊框樣式；<br/>
    border-top-color:上邊框顏色。
    <br/>
</div>
</body>
</html>

輸出結(jié)果

11.2 圓角風格

使用CSS的border-radius 屬性，你可以給任何元素制作 "圓角"。 border-radius統(tǒng)一指定4個圓角，順序為左上、右上、右下和左下。如果要特定指定某個角的話，用border-top-left-radius等方式即可。

在樣式表ys2.css文中的內(nèi)容

/*4個角統(tǒng)一指定*/
.four-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-radius: 15px;
    vertical-align: middle;
    text-align: center;
}

/*單獨指定一個角*/
.one-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的內(nèi)容

<br/><br/>
<div class="four-radius">
    統(tǒng)一設(shè)置4個圓角<br/>
    一個值： 四個圓角值相同;<br/>
    兩個值: 左上角與右下角，右上角與左下角;<br/>
    三個值: 左上角, 右上角和左下角，右下角;<br/>
    四個值: 左上角，右上角，右下角，左下角。
</div>
<br/>
<div class="one-radius">
    單獨指定某個角<br/>
    border-top-left-radius：左上角;<br/>
    border-top-right-radius：右上角;<br/>
    border-bottom-right-radius：右下角;<br/>
    border-bottom-left-radius：左下角。
</div>

輸出結(jié)果

11.3 圓角邊框

不要重復(fù)造輪子，所以好多程序員一遇到問題，就喜歡搜索，我也是，哈哈哈~。CSS有指定邊框的屬性，也有圓角的屬性，將其放在一起，是不是就可以實現(xiàn)圓角邊框?答案毋庸置疑，答案是肯定的。

在樣式表ys2.css文件中的內(nèi)容

/*圓角邊框*/
.corners {
    border-radius: 50px;
    border: 3px solid #8AC007;
    padding: 50px;
    width: 720px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的內(nèi)容

<div class="corners">
    邊框?qū)傩院蛨A角屬性，組合成圓角邊框
</div>

輸出結(jié)果

好了，有關(guān)CSS的圓角邊框內(nèi)容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點贊，就是對老陳繼續(xù)創(chuàng)作和分享最大的鼓勵。

一個當了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗。想學編程的朋友，可關(guān)注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒錯的。

#前端##HTML5##CSS##程序員##Web#

TML5 為前端開發(fā)者帶來了許多表單增強功能，這些功能使得創(chuàng)建交互式和用戶友好的表單變得更加容易。在本文中，我們將介紹幾種 HTML5 新增的表單功能，并提供完整的 HTML 示例，以幫助你了解如何在實際項目中應(yīng)用這些功能。

1. 新的輸入類型

HTML5 引入了一系列新的 input 類型，以支持更多種類的數(shù)據(jù)輸入，比如電子郵件、日期等。

例子：電子郵件和網(wǎng)址輸入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>電子郵件和網(wǎng)址輸入示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設(shè)置字體 */
            padding: 20px; /* 頁面內(nèi)邊距 */
        }

        form {
            max-width: 400px; /* 表單最大寬度 */
            margin: 0 auto; /* 居中顯示 */
            padding: 20px; /* 表單內(nèi)邊距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 5px; /* 邊框圓角 */
            background-color: #f9f9f9; /* 背景顏色 */
        }

        label {
            display: block; /* 使標簽獨占一行 */
            margin-bottom: 5px; /* 標簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="email"],
        input[type="url"] {
            width: 100%; /* 輸入框?qū)挾?*/
            padding: 8px; /* 內(nèi)邊距 */
            margin-bottom: 20px; /* 與下一個元素的間距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 4px; /* 邊框圓角 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景顏色 */
            color: white; /* 字體顏色 */
            padding: 10px 20px; /* 內(nèi)邊距 */
            border: none; /* 無邊框 */
            border-radius: 4px; /* 邊框圓角 */
            cursor: pointer; /* 鼠標樣式 */
            font-size: 16px; /* 字體大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠標懸停時的背景顏色 */
        }
    </style>
</head>
<body>

<form>
    <label for="email">電子郵件:</label>
    <input type="email" id="email" name="email" required>

    <label for="url">個人網(wǎng)站:</label>
    <input type="url" id="url" name="url">

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，我們使用了 type="email" 和 type="url" 來要求用戶輸入有效的電子郵件地址和網(wǎng)址。如果用戶輸入的不符合格式，瀏覽器會在提交表單前顯示一個警告。

2. 占位符屬性

placeholder 屬性允許我們在輸入字段中設(shè)置一個提示文本，當輸入字段為空時顯示，一旦開始輸入，提示文本就會消失。

例子：帶占位符的輸入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>帶占位符的輸入框示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設(shè)置字體 */
            padding: 20px; /* 頁面內(nèi)邊距 */
        }

        form {
            max-width: 300px; /* 表單最大寬度 */
            margin: 0 auto; /* 居中顯示 */
            padding: 20px; /* 表單內(nèi)邊距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 5px; /* 邊框圓角 */
            background-color: #f9f9f9; /* 背景顏色 */
        }

        label {
            display: block; /* 使標簽獨占一行 */
            margin-bottom: 10px; /* 標簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="search"] {
            width: calc(100% - 22px); /* 輸入框?qū)挾龋瑴p去內(nèi)邊距和邊框的寬度 */
            padding: 10px; /* 內(nèi)邊距 */
            margin-bottom: 20px; /* 與下一個元素的間距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 4px; /* 邊框圓角 */
            box-sizing: border-box; /* 盒子模型，使寬度包含邊框和內(nèi)邊距 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景顏色 */
            color: white; /* 字體顏色 */
            padding: 10px 20px; /* 內(nèi)邊距 */
            border: none; /* 無邊框 */
            border-radius: 4px; /* 邊框圓角 */
            cursor: pointer; /* 鼠標樣式 */
            font-size: 16px; /* 字體大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠標懸停時的背景顏色 */
        }
    </style>
</head>
<body>

<form>
    <label for="search">搜索:</label>
    <input type="search" id="search" name="search" placeholder="請輸入搜索關(guān)鍵字">

    <input type="submit" value="搜索">
</form>

</body>
</html>

這里的 placeholder="請輸入搜索關(guān)鍵字" 就是一個占位符，它會在用戶輸入之前顯示在搜索框中。

3. 自動聚焦屬性

autofocus 屬性可以讓頁面加載時自動將焦點放到某個表單元素上。

例子：自動聚焦的輸入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自動聚焦的輸入框示例</title>
</head>
<body>

<form>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" autofocus>

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，當頁面加載完成后，姓名輸入框?qū)⒆詣荧@得焦點。

4. 表單驗證

HTML5 為表單驗證提供了內(nèi)置支持，通過簡單的屬性如 required、min、max 和 pattern 等，可以在不使用 JavaScript 的情況下進行基本的驗證。

例子：表單驗證

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表單驗證示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }

        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #333;
        }

        input[type="number"],
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; /* 包括邊框和內(nèi)邊距在內(nèi)的寬度 */
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        input:invalid {
            border-color: red;
        }

        input:valid {
            border-color: green;
        }
    </style>
</head>
<body>

<form>
    <label for="age">年齡:</label>
    <input type="number" id="age" name="age" min="18" max="99" required>

    <label for="zipcode">郵編:</label>
    <input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="請輸入5位數(shù)字的郵編" required>

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，年齡字段要求用戶輸入一個介于 18 到 99 之間的數(shù)字，而郵編字段要求用戶輸入一個符合特定模式（5位數(shù)字）的文本。

結(jié)語

HTML5 的表單增強功能大大簡化了表單處理和驗證的工作，使得開發(fā)更加高效，同時也提高了用戶體驗。通過上述示例，我們可以看到，利用 HTML5 的新特性，可以創(chuàng)建功能強大且易于使用的表單。隨著技術(shù)的不斷進步，我們作為開發(fā)者應(yīng)該不斷學習和實踐，以便更好地利用這些新工具來構(gòu)建更好的網(wǎng)頁。

在線咨詢

上一篇：小猿圈web前端開發(fā)之HTML5 manifest離線緩存的示例
下一篇：簡單網(wǎng)頁設(shè)計模板html