css border-style边框样式属性笔记

原创 国哥笔记  2017-12-17 18:44  阅读 1,530 views 次

border-style属性定义及用法

1、在php中,border-style属性是用来设置元素的边框的样式,该属性有四个属性值,分别代表上右下左四个方向上的边框;

2、border-style属性的四个属性值不一定要四个都设置,允许设置1-4个值。如果只设置第一个属性值,那么其它三个属性值默认都和第一个相同;如果设置第一个和第二个属性值,那么第三个属性值默认和第一个属性值相同,第四个属性值默认和第二个属性值相同;如果设置三个属性值,那么第四个属性值和第二个属性值相同;

border-style属性1-4个属性值的情况

  1. border-style:1; --> border-style:1 1 1 1;
  2. border-style:1 2; --> border-style:1 2 1 2;
  3. border-style:1 2 3; --> border-style:1 2 3 2;
  4. border-style:1 2 3 4; --> border-style:1 2 3 4;

border-style属性值

  • none:无边框;
  • hidden:无边框(应用于表时除外,hidden用于解决边框冲突);
  • dotted:点状边框;
  • dashed:虚线;
  • solid :实线;
  • double:双线;
  • groove:3D凹槽边框(效果取决于border-color的值);
  • ridge:3D垄状边框(其效果取决于 border-color 的值);
  • inset :3D inset 边框(其效果取决于 border-color 的值);
  • outset:3D outset 边框(其效果取决于 border-color 的值);
  • inherit:从父元素继承边框样式

语法格式:

border-style:属性值1[ 属性值1 属性值1 属性值1];

实例1(所有边框样式):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css border-style边框样式属性笔记</title>
<style>
.bs1 {border-style:none;}
.bs2 {border-style:hidden;}
.bs3 {border-style:dotted;}
.bs4 {border-style:dashed;}
.bs5 {border-style:solid;}
.bs6 {border-style:double;}
.bs7 {border-style:groove;}
.bs8 {border-style:ridge;}
.bs9 {border-style:inset;}
.bs10 {border-style:outset;}
</style>
<head/>
<body>
<p class="bs1">无边框</p>
<p class="bs2">隐藏边框</p>
<p class="bs3">虚线边框</p>
<p class="bs4">虚线边框</p>
<p class="bs5">实线边框</p>
<p class="bs6">双边框</p>
<p class="bs7">3D 凹槽边框</p>
<p class="bs8">3D 垄状边框</p>
<p class="bs9">3D inset 边框</p>
<p class="bs10">3D outset 边框</p>
</body>

运行结果:

css border-style边框样式属性笔记

实例2(1-4个属性值):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css border-style边框样式属性笔记</title>
<style>
#bs{width:500px;}
#bs1 {border-style:dotted;}
#bs2 {border-style:dotted dashed;}
#bs3 {border-style:dotted dashed solid;}
#bs4 {border-style:dotted dashed solid double;}
</style>
<head/>
<body>
<div id="bs">
<p id="bs1">一个属性值</p>
<p id="bs2">二个属性值</p>
<p id="bs3">三属性值</p>
<p id="bs4">四属性值</p>
</div>
</body>
</html>

运行结果:

css border-style边框样式属性笔记

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

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

发表评论


表情