位置:电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS入门
CSS 基础样式
CSS 高级样式
语法应用:CSS 对齐
当前阅读教程:CSS入门到精通 > 边框宽度 border-width
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 边框样式 border-style 下一篇: 边框颜色 border-color

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

image.png

属性定义及使用说明

border-width属性设置一个元素的四个边框的宽度。此属性可以有一到四个值。

代码解析

border-width:thin medium thick 10px;

n  上边框是细边框

n  右边框是中等边框

n  下边框是粗边框

n  左边框是 10px 宽的边框

border-width:thin medium thick;

n  上边框是细边框

n  右边框和左边框是中等边框

n  下边框是粗边框

border-width:thin medium;

n  上边框和下边框是细边框

n  右边框和左边框是中等边框

border-width:thin;

n  所有4个边框都是细边框

默认值:

medium

继承性:

no

版本:

CSS1

JavaScript 语法:

object.style.borderWidth="thin   thick"

属性值

描述

thin

定义细的边框。

medium

默认。定义中等的边框。

thick

定义粗的边框。

length

允许您自定义边框的宽度。

inherit

规定应该从父元素继承边框宽度。

 

实例

代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>边框宽度border-width     </title>

<!--定义内部样式-->

<style>

     .css1

     {

             border-style:solid;/*实线*/

             border-width:5px;/*宽度*/

     }

     .css2

     {

             border-style:solid;/*实线*/

             border-width:medium;/*宽度*/

     }

     .css3

     {

             border-style:solid;/*实线*/

             border-width:1px;/*宽度*/

     }

     </style>

</head>

<body>

    

     <p>html入门到精通</p>

     <p>css入门到精通</p>

     <p>javascript入门到精通</p>

     <p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>

    

</body>

</html>

 

效果图

小白教程网www.2d5.net

image.png



上一篇: 边框样式 border-style 下一篇: 边框颜色 border-color
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)