css border-bottom-style属性笔记

原创 PHP笔记  2017-11-21 19:24  阅读 1,257 views 次

在css中,border-bottom-style属性是用来设置元素底部边框样式

属性值

  • none :无边框;
  • hidden:无边框(应用于表时除外,用于解决表的边框冲突);
  • dotted:点状边框;
  • dashed:虚线边框;
  • solid :实线边框;
  • double:双边框;
  • groove:双线(双线的宽度等于 border-width 的值);
  • ridge:三维菱形边框(其效果取决于 border-color 的值);
  • inset :三维凹边框(其效果取决于 border-color 的值);
  • outset:三维凸边框(其效果取决于 border-color 的值);
  • inherit:从父元素继承边框样式。

语法格式:

border-bottom-style:属性值;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css border-bottom-style属性笔记</title>
<style>
p {border-style:solid;}
#bbs1 {border-bottom-style:none;}
#bbs2 {border-bottom-style:dotted;}
#bbs3 {border-bottom-style:dashed;}
#bbs4 {border-bottom-style:solid;}
#bbs5 {border-bottom-style:double;}
#bbs6 {border-bottom-style:groove;}
#bbs7 {border-bottom-style:ridge;}
#bbs8 {border-bottom-style:inset;}
#bbs9 {border-bottom-style:outset;}
</style>
<head/>
<body>
<p id="bbs1">无底边界。</p>
<p id="bbs2">点底边界。</p>
<p id="bbs3">虚线底边界。</p>
<p id="bbs4">实线底边界。</p>
<p id="bbs5">双线底边界。</p>
<p id="bbs6">凹槽底边界。</p>
<p id="bbs7">垄状底边界。</p>
<p id="bbs8">嵌入底边界。</p>
<p id="bbs9">外凸底边界。</p>
</body>
</html>

运行结果;

 

边框样式简写属性———>css border-style边框属性笔记

更多css属性——>css属性大全

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

发表评论


表情