CSS允许您为任何HTML元素的边框设置样式。它还为您提供了一种为元素的一条或多条边设置边框样式的方法。
下面的示例演示可用于将样式应用于任何HTML元素的边框的各种CSS属性。文章源自你的网络首码项目网-https://www.youranweb.com/258.html
设置所有边的边框
若要为元素的所有边设置边框样式，请使用border-width、border-style和border-color属性。还可以使用border属性一次设置所有属性。文章源自你的网络首码项目网-https://www.youranweb.com/258.html
border-width和border-styleborder-color
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 20px;
border-width: 1px;
border-style: solid;
border-color: orange;
}
</style>
<div>
此“div”使用边框宽度、边框样式和边框颜色属性应用了边框样式。
</div>物业border
border属性是用于设置border-width、border-style和border-color的简写。文章源自你的网络首码项目网-https://www.youranweb.com/258.html
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 20px;
border: 1px solid orange;
}
</style>
<div>
此“div”使用“边框”属性应用了边框样式。
</div>边框样式
边框可以具有以下样式。文章源自你的网络首码项目网-https://www.youranweb.com/258.html
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 5px;
margin: 10px;
text-align: center;
border-color: orange;
border-width: 4px;
}
.solid {
border-style: solid;
}
.dotted {
border-style: dotted;
}
.dashed {
border-style: dashed;
}
.double {
border-style: double;
}
.groove {
border-style: groove;
}
.ridge {
border-style: ridge;
}
.inset {
border-style: inset;
}
.outset {
border-style: outset;
}
.hidden {
border-style: hidden;
}
</style>
<div class="solid">This 'div' has a border style of 'solid'.</div>
<div class="dotted">This 'div' has a border style of 'dotted'.</div>
<div class="dashed">This 'div' has a border style of 'dashed'.</div>
<div class="double">This 'div' has a border style of 'double'.</div>
<div class="groove">This 'div' has a border style of 'groove'.</div>
<div class="ridge">This 'div' has a border style of 'ridge'.</div>
<div class="inset">This 'div' has a border style of 'inset'.</div>
<div class="outset">This 'div' has a border style of 'outset'.</div>
<div class="hidden">This 'div' has a border style of 'hidden'.</div>设置每侧的边框
如果不希望将边框设置应用于所有四条边，或者希望每条边应用不同的样式，则可以使用以下属性：文章源自你的网络首码项目网-https://www.youranweb.com/258.html
显式属性
底部边框颜色：border-bottom文章源自你的网络首码项目网-https://www.youranweb.com/258.html
底部边框样式：border-bottom-style文章源自你的网络首码项目网-https://www.youranweb.com/258.html
下边框宽度：border-bottom-width文章源自你的网络首码项目网-https://www.youranweb.com/258.html
左边框颜色：border-left-color文章源自你的网络首码项目网-https://www.youranweb.com/258.html
左边框样式：border-left-style文章源自你的网络首码项目网-https://www.youranweb.com/258.html
左边框宽度：border-left-width文章源自你的网络首码项目网-https://www.youranweb.com/258.html
右边框颜色：border-right-color文章源自你的网络首码项目网-https://www.youranweb.com/258.html
右边框样式：border-right-style文章源自你的网络首码项目网-https://www.youranweb.com/258.html
右边框宽度：border-right-width文章源自你的网络首码项目网-https://www.youranweb.com/258.html
边框顶部颜色：border-top-color文章源自你的网络首码项目网-https://www.youranweb.com/258.html
上边框样式：border-top-style文章源自你的网络首码项目网-https://www.youranweb.com/258.html
顶部边框宽度：border-top-width文章源自你的网络首码项目网-https://www.youranweb.com/258.html
例：
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 20px;
border-bottom-width: 4px;
border-bottom-style: double;
border-bottom-color: orange;
}
</style>
<div>
此“div”具有底部边框。
</div>速记属性
以下属性为您提供了一种更简洁的方式来指定每条边的边框属性。文章源自你的网络首码项目网-https://www.youranweb.com/258.html
底部边框：border-bottom文章源自你的网络首码项目网-https://www.youranweb.com/258.html
左边框：border-left文章源自你的网络首码项目网-https://www.youranweb.com/258.html
右边框：border-right
上边框：border-top
例：
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 20px;
border-bottom: 4px double orange;
}
</style>
<div>
此“div”具有底部边框。
</div>边框半径
可以使用边框半径属性为边框：border-radius提供圆角。
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 20px;
border: 1px solid orange;
border-radius: 8px;
}
</style>
<div>
圆形角
</div>
评论