个性化阅读
专注于IT技术分析

CSS边框

点击下载

本文概述

CSS边框是用于在元素上设置边框的简写属性。

CSS边框属性用于指定元素边框的样式, 颜色和大小。 CSS边框属性如下

  • 边框样式
  • 边框颜色
  • 边框宽度
  • 边界半径

1)CSS边框样式

边框样式属性用于指定要在网页上显示的边框类型。

有一些边框样式值与border-style属性一起使用以定义边框。

描述
none 它没有定义任何边界。
dotted 用于定义虚线边框。
dashed 它用于定义虚线边框。
solid 它用于定义实线边框。
double 它使用相同的边框宽度值定义两个边框。
groove 它定义了一个3d带凹槽的边框。根据边框颜色值生成效果。
ridge 它定义了一个3d脊形边框。根据边框颜色值生成效果。
inset 它定义了一个3d内嵌边框。根据边框颜色值生成效果。
outset 它定义了3d起始边框。根据边框颜色值生成效果。
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>

输出:

无边界。

虚线边框。

虚线边框。

坚实的边界。

双边框。

凹槽边框。

山脊边界。

嵌入边框。

起始边框。

隐藏的边框。


2)CSS边框宽度

border-width属性用于设置边框的宽度。以像素为单位设置。你还可以使用三个预定义值之一(细, 中或粗)来设置边框的宽度。

注意:border-width属性不能单独使用。它总是与其他边框属性(例如“ border-style”属性)一起使用, 以先设置边框, 否则将无法使用。

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
    border-style: solid;
    border-width: 5px;
}
p.two {
    border-style: solid;
    border-width: medium;
}
p.three {
    border-style: solid;
    border-width: 1px;
}
</style>
</head>
<body>
<p class="one">Write your text here.</p>
<p class="two">Write your text here.</p>
<p class="three">Write your text here.</p>
</body>
</html>

3)CSS边框颜色

有三种方法可以设置边框的颜色。

  • 名称:指定颜色名称。例如:“红色”。
  • RGB:指定颜色的RGB值。例如:“ rgb(255, 0, 0)”。
  • 十六进制:指定颜色的十六进制值。例如:“#ff0000”。

还有一个名为“透明”的边框颜色。如果未设置边框颜色, 则从元素的color属性继承。

注意:border-color属性不能单独使用。它总是与其他边框属性(例如“ border-style”属性)一起使用, 以先设置边框, 否则将无法使用。

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
    border-style: solid;
    border-color: red;
}
p.two {
    border-style: solid;
    border-color: #98bf21;
} 
</style>
</head>
<body>
<p class="one">This is a solid red border</p>
<p class="two">This is a solid green border</p>
</body>
</html>
赞(0)
未经允许不得转载:srcmini » CSS边框

评论 抢沙发

评论前必须登录!