css border-left-style属性笔记

原创 PHP笔记  2017-12-01 16:26  阅读 1,207 views 次

定义及用法

在php中,border-left-style属性是用来设置元素左边框的样式,相似的属性有:border-top-style属性、border-bottom-style属性、border-right-style属性,其用法和border-left-style属性一样。

border-left-style属性值

  • nonea:无边框。
  • hidden:与 "none" 相同(用于解决表的边框冲突)。
  • dotted:点状边框。
  • dashed:虚线。
  • solid :实线。
  • double:双线。
  • groove:3D 凹槽边框(效果取决于border-color的值)。
  • ridge:3D 垄状边框(效果取决于border-color的值)。
  • inset :3D嵌入边框(效果取决于border-color的值)。
  • outset:3D 外凸边框(效果取决于border-color的值)。
  • inherit:从父元素继承边框样式。

语法格式:

border-left-style:样式 / inherit;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css border-left-style属性笔记</title>
<style>
p{border-style:solid;border-left-color:red;}
#bls1 {border-left-style:none;}
#bls2 {border-left-style:dotted;}
#bls3 {border-left-style:dashed;}
#bls4 {border-left-style:solid;}
#bls5 {border-left-style:double;}
#bls6 {border-left-style:groove;}
#bls7 {border-left-style:ridge;}
#bls8 {border-left-style:inset;}
#bls9 {border-left-style:outset;}
</style>
<head/>
<body>
<p id="bls1">左边无边框</p>
<p id="bls2">左边点状边框</p>
<p id="bls3">左边虚线边框</p>
<p id="bls4">左边实线边框</p>
<p id="bls5">左边双线边框</p>
<p id="bls6">左边3D凹槽边框</p>
<p id="bls7">左边3D垄状边框</p>
<p id="bls8">左边3D嵌入边框</p>
<p id="bls9">左边外凸边框</p>
</body>
</html>

运行结果:

css border-left-style属性笔记

相关属性——>css border-left属性笔记(border-left属性可以同时设置包含border-left-*的属性)

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

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

发表评论


表情