div 中如何加各种边框（转）

zoukankan html css js c++ java

div 中如何加各种边框（转）

边框风格属性(border-style)
　　这个属性用来设定上下左右边框的风格，它的值如下：

　　none (没有边框，无论边框宽度设为多大)

　　dotted (点线式边框)

　　dashed (破折线式边框)

　　solid (直线式边框)

　　double (双线式边框)

　　groove (槽线式边框)

　　ridge(脊线式边框)

　　inset (内嵌效果的边框)

　　outset (突起效果的边框)

　　示例：分别使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS边框风格属性示例

<html>
<head>
<title>边框风格属性 border-style </title>
<style type="text/css">
.d1 {border-style:none;}
.d2 {border-style:solid;}
.d3 {border-style:dotted;}
.d4 {border-style:dashed;}
.d5 {border-style:double;}
.d6 {border-style:groove;}
.d7 {border-style:ridge;}
.d8 {border-style:inset;}
.d9 {border-style:outset;}
</style>
</head>
<body>
<div>这个div的CSS边框风格(border-style)属性缺省值是none。</div>
<br>
<div class = "d1">这个div的CSS边框风格(border-style)属性是none。</div>
<br>
<div class = "d2">这个div的CSS边框风格(border-style)属性是solid。</div>
<br>
<div class = "d3">这个div的CSS边框风格(border-style)属性是dotted。</div>
<br>
<div class = "d4">这个div的CSS边框风格(border-style)属性是dashed。</div>
<br>
<div class = "d5">这个div的CSS边框风格(border-style)属性是double。</div>
<br>
<div class = "d6">这个div的CSS边框风格(border-style)属性是groove。</div>
<br>
<div class = "d7">这个div的CSS边框风格(border-style)属性是ridge。</div>
<br>
<div class = "d8">这个div的CSS边框风格(border-style)属性是inset。</div>
<br>
<div class = "d9">这个div的CSS边框风格(border-style)属性是outset。</div>
<br>
</body>
</html>

这个div的CSS边框风格(border-style)属性缺省值是none。

这个div的CSS边框风格(border-style)属性是none。

这个div的CSS边框风格(border-style)属性是solid。直线式边框

这个div的CSS边框风格(border-style)属性是dotted。点线式边框

这个div的CSS边框风格(border-style)属性是dashed。破折线式边框

这个div的CSS边框风格(border-style)属性是double。双线式边框

这个div的CSS边框风格(border-style)属性是groove。槽线式边框

这个div的CSS边框风格(border-style)属性是ridge。脊线式边框

这个div的CSS边框风格(border-style)属性是inset。内嵌效果

这个div的CSS边框风格(border-style)属性是outset。突起效果

查看全文

相关阅读:
DevExpress ASP.NET v19.1版本亮点：Pivot Grid等控件
 .NET界面控件DevExpress全新发布v19.1.5|改进Office 2019主题
 Kendo UI for jQuery使用教程：操作系统/jQuery支持等
 Web安全篇之SQL注入攻击
 SQL Server中timestamp（时间戳）和rowversion（版本戳）
PyCharm2019 激活码
 性能测试 vs 负载测试 vs 压力测试
 一套完整的压力测试项目文档
 Visual Studio性能计数器，负载测试结果分析- Part III
Visual Studio进行负载测试，RIG和负载测试术语- Part II

原文地址：https://www.cnblogs.com/xiohao/p/3202874.html