html标签对象的特性和特殊样式归纳

最新推荐文章于 2021-06-17 20:03:16 发布

原创最新推荐文章于 2021-06-17 20:03:16 发布 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #div #border #input #table

HTML 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何使用HTML中的input与div元素，并重点讲解了CSS中边框属性的应用，包括边框宽度、样式及颜色等设定方式。

1：text

(1)设置为只读

2：div

（1）：边框宽度、颜色设定

<div style="border:1 solid red;width:100">hello</div>

注意：1后面没有单位px，如果加上，则会出错。

（2）：边框详解

边框的性质有3个，就像一张图档周围还有3个框.... 由内至外分别是padding,border-width,margin... 这3个框右分别有上、下、左、右，四个性质可设定它的大小... 共12种性质如下： padding padding-top:2px padding-right padding-bottom padding-left border-width border-top-width border-right-width border-botton-width border-left-width margin margin-top margin-right margin-botton margin-left 可以针对一个性质作设定也可以同时，如： padding:2px,1px,2px,1px 依序是上、右、下、左或者单一，如 padding-top:2px 至于边框的形式与颜色，可以针对形式border-style来设定... 一样有上、右、下、左，四个性质： border-top-style border-right-style border-botton-style border-left-style 性质的内容可设定为： solid:实线 double:双直线 groove:3D凹线 ridge:3D凸线 inset:3D崁入线 outset:3D隆起线边框颜色border-color的设定：一样有上、右、下、左，四个性质： border-top-color border-right-color border-botton-color border-left-color 颜色设定跟字体的设定一样..... ................................ 关于以上的设定，如果其中一个性值的设定，如： border-style:solid,double 我只设定的上、右的边框，则缺少的边框会自动已相对的边框来设并.. 所以结果会相当于： border-style:solid,double,solid,double ........................................... 在实际运用上，举个例： <html> <head> <meta content="text/html; charset=big5" http-equiv=Content-Type> <title></title> </head> <body> <table style="border-width:10;border-style:double;border-color:red" mce_style="border-width:10;border-style:double;border-color:red"> <tr><td>红色双直线边框</td></tr> </table> <div style="border-width:10;border-style:ridge;border-color:green" mce_style="border-width:10;border-style:ridge;border-color:green"> 绿色3D凸线边框 </div> </body> </html>