css border-top-style属性设置顶部边框样式笔记

原创 国哥笔记  2018-11-06 20:05  阅读 637 views 次

border-top-style属性定义及用法

在css中,border-top-style属性是用来设置元素的顶部边框样式,当我们需要单独设置顶部边框样式的时候,就可以使用该属性。

border-top-style属性语法格式

  1. css语法:border-top-style: none / hidden / dotted / dashed / solid / double / groove / ridge / inset outset / inherit;
  2. JavaScript语法:object.style.borderTopStyle="属性值";

border-top-style属性值说明

  • none:无边框(默认);
  • hidden:与 "none" 相同(但用于表,用于解决边框冲突)。
  • dotted:点状边框(部分浏览器显示为实线);
  • dashed:虚线(部分浏览器显示为实线);
  • solid :实线;
  • double:双线;
  • groove:3D凹槽边框(效果取决于border-color属性);
  • ridge:3D垄状边框(效果取决于border-color属性);
  • inset :3D inset边框(效果取决于border-color属性);
  • outset:3D outset边框(效果取决于border-color属性);
  • inherit:从父元素继承边框样式。

实例:

<html>
<head>
<meta charset="utf-8" />
<title>css border-top-style属性设置顶部边框样式笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c{margin-top:18px;width:360px;}
#a{border-top-style:dotted;}
#b{border-top-style:solid;}
#c{border-top-style:double;}
</style>
</head>
<body>
<div id = "a">dotted:设置顶部边框为点状边框</div>
<div id = "b">solid :设置顶部边框为实线;</div>
<div id = "c">double:设置顶部边框为双线;</div>
</body>
</html>

运行结果:

css border-top-style属性设置顶部边框样式笔记

 

更多css属性请移步到——>css属性大全

非常相关

 

本文地址:https://www.ggbiji.com/border-top-style.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情