旗下导航:搜·么
当前位置:网站首页 > HTML > 正文

css边框款式有若干种【html5教程】

作者:搜搜PHP网发布时间:2019-11-26分类:HTML浏览:83


导读:多样的边框款式,能够雄厚我们网页的界面,进步用户体验。css边框款式,罕见的有实线、虚线、双线、点线等等一些边框款式。下面我们就给经由过程简朴的代码示例,给人人总结一些...
多样的边框款式,能够雄厚我们网页的界面,进步用户体验。css边框款式,罕见的有实线、虚线、双线、点线等等一些边框款式。

下面我们就给经由过程简朴的代码示例,给人人总结一些罕见的边框款式!

代码以下:

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title></title>
    <style type="text/css">
        h1{width: 500px;}
        h1.abc {border-style: none;}
        h1.dotted {border-style: dotted;}
        h1.dashed {border-style: dashed;}
        h1.solid {border-style: solid;}
        h1.double {border-style: double;}
        h1.groove {border-style: groove;}
        h1.ridge {border-style: ridge;}
        h1.inset {border-style: inset;}
        h1.outset {border-style: outset;}
        h1.hidden {border-style: hidden;}
    </style>

</head>
<body>
<h1 class="none">无边框</h1>
<h1 class="dotted">点状边框</h1>
<h1 class="dashed">虚线边框</h1>
<h1 class="solid">实线边框</h1>
<h1 class="double">双线边框</h1>
<h1 class="groove">3D 凹槽边框</h1>
<h1 class="ridge">3D 垄状边框</h1>
<h1 class="inset">3D inset 边框</h1>
<h1 class="outset">3D outset 边框</h1>
<h1 class="hidden">隐蔽边框</h1>
</body>
</html>

边框款式以下:

border-style 属性用于设置元素一切边框的款式,或许单独地为各边设置边框款式。

注:只有当这个值不是 none 时边框才能够涌现。

本篇文章就是关于css边框款式的总结款式引见,愿望对须要的朋侪有所协助!

以上就是css边框款式有若干种的细致内容,更多请关注ki4网别的相干文章!

标签:css边框样式