HI,欢迎您光临Downzz,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!
当前位置:首页 > 站长教程 > 建站经验 > CSS教程 > CSS border-width属性用法详解_CSS实例

CSS border-width属性用法详解_CSS实例

时间:2019-10-27人气:471来源:Downzz我要评论(0)

此属性用来规定元素边框的宽度,通俗的讲就是boder的"厚度",下面就通过代码实例介绍一下此属性的用法。

一.基本知识:

语法结构:

border-width:<length> | thin | medium | thick

参数说明:

1.length:通过"5px"这种方式设置边框宽度。

2.thin:边框宽度较细。

3.medium:默认值,中等宽度。

4.thick:边框宽度较宽。

二.参数设置:

border-width可以具有1-4个参数:

1.如果只有一个参数,那么将应用于四个边框。

2.如果具有两个参数,那么第一个参数用于上线边框,第二个参数用于左右边框。

3.如果具有三个参数,那么第一个用于上边框,第二个用于左右边框,第三个用于下边框。

三.代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>Downzz.com</title>
<style type="text/css">
div{
  margin:0px auto;
  height:100px;
  width:100px;
  border-style:solid;
  border-color:red;
  border-width:10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上代码可以将div的四个边框宽度设置为10px。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>Downzz.com</title>
<style type="text/css">
div{
  margin:0px auto;
  height:100px;
  width:100px;
  border-style:solid;
  border-color:red;
  border-width:10px 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上代码可以将上下边框的宽度设置为10px,左右边框的宽度设置为20px。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>Downzz.com</title>
<style type="text/css">
div{
  margin:0px auto;
  height:100px;
  width:100px;
  border-style:solid;
  border-color:red;
  border-width:10px 20px 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上代码可以将上边框宽度设置为10px,左右边框宽度为20px,下边框宽度为40px。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>Downzz.com</title>
<style type="text/css">
div{
  margin:0px auto;
  height:100px;
  width:100px;
  border-style:solid;
  border-color:red;
  border-width:10px 20px 30px 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上代码可以按照上右下左的顺序依次设置边框的宽度。

温馨提示:以上内容和图片整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!如有侵权行为请联系删除!

相关文章

  • 今日头条客户端提现步骤和条件详解_软件教程

    今日头条app怎么提现?今日头条新版上线了提现功能,很多用户不清楚怎么操作?没关系,下面是小编整理出来的相关问题解答,相信可以帮到大家。今日头条app提现步骤1、进入提现页面打开今日头条客户端,点击【我的】【作品管理】【数据】【提现】
  • 匹配磁力链接的正则表达式_正则实例

    本文分享一段正则表达式,实现了对磁力链接的匹配。代码实例如下:/^magnet:\?xt=urn:btih:[0-9a-fA-F]{40,}.*$/上述代码实现了对于磁力链接的基本匹配效果,可以根据需要自行测试修改。

网友评论

请自觉遵守互联网相关政策法规,评论内容只代表网友观点,与本站立场无关!

最新评论

还没有收到评论,赶紧来抢沙发吧~

关于站长下载 | 联系方式 | 发展历程 | 版权声明 | 下载帮助(?) | 广告联系 | 网站地图 | 友情链接

Copyright 2005-2019 Downzz.Com 【站长下载】 版权所有 浙ICP备17005543号-4 | 浙公网安备 42011102000245号工信部

声明: 本站部分内容属于原创转载请注明出处 如有侵权行为请严格参照本站【版权声明】与我们联系,我们将在48小时内容进行处理!