HTML中的边框属性
生活随笔
收集整理的這篇文章主要介紹了
HTML中的边框属性
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
可以通過邊框風(fēng)格屬性border-style設(shè)定上下左右邊框的風(fēng)格，該屬性用于設(shè)置一個(gè)元素邊框的樣式，而且必須用于指定可見的邊框?？梢允褂?到4個(gè)關(guān)鍵字，如果四個(gè)值都給出了，它們分別用于上、右、下和左邊框的樣式
如果給出一個(gè)值，它將被運(yùn)用到各邊上。
如果兩個(gè)或三個(gè)值給出了，省略了的值與對(duì)邊相等
也可以分別使用border-top-style、border-bottom-style、border-left-style、border-right-style屬性單獨(dú)設(shè)置各邊的風(fēng)格
各邊的風(fēng)格使用的屬性值
none：沒有邊框，無論邊框?qū)挾仍O(shè)置為多大
dotted：點(diǎn)線式邊框
dashed：破折線式邊框
solid：直線式邊框
double：雙線式邊框
groove：槽線式邊框
ridge：脊線式邊框
inset：內(nèi)嵌效果的邊框
outset：突起效果的邊框
1 <!--
2 可以通過邊框風(fēng)格屬性border-style設(shè)定上下左右邊框的風(fēng)格，該屬性用于設(shè)置一個(gè)元素邊框的樣式，而且必須用于指定可見的邊框?？梢允褂?到4個(gè)關(guān)鍵字，如果四個(gè)值都給出了，它們分別用于上、右、下和左邊框的樣式
3
4 如果給出一個(gè)值，它將被運(yùn)用到各邊上。
5
6 如果兩個(gè)或三個(gè)值給出了，省略了的值與對(duì)邊相等
7
8 也可以分別使用border-top-style、border-bottom-style、border-left-style、border-right-style屬性單獨(dú)設(shè)置各邊的風(fēng)格
9
10
11 各邊的風(fēng)格使用的屬性值
12 none：沒有邊框，無論邊框?qū)挾仍O(shè)置為多大
13 dotted：點(diǎn)線式邊框
14 dashed：破折線式邊框
15 solid：直線式邊框
16 double：雙線式邊框
17 groove：槽線式邊框
18 ridge：脊線式邊框
19 inset：內(nèi)嵌效果的邊框
20 outset：突起效果的邊框
21 -->
22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
23 <html xmlns="http://www.w3.org/1999/xhtml">
24 <head>
25 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
26 <title>邊框風(fēng)格屬性</title>
27 <style>
28 h1{
29 border-style:solid;
30 border-width:10px 20px 30px 40px;
31 border-color:red blue yellow green;
32 }
33 h2{
34 border-style:double solid inset dotted;
35 }
36 h3{
37 border-top-style:solid;
38 border-bottom-style:outset;
39 }
40 </style>
41 </head>
42
43 <body>
44 <h1>wwwwwwwwwwwwwwwww</h1>
45 <h2>wwwwwwwwwwwwwwwww</h2>
46 <h3>wwwwwwwwwwwwwwwww</h3>
47 </body>
48 </html>
總結(jié)
以上是生活随笔為你收集整理的HTML中的边框属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 王者荣耀6字好听的名字89个
- 下一篇： 花枝片是什么食材