网站制作教程:CSS 边框属性

你的网络首码项目网 网站建设来源:你的网络首码项目网评论34字数 2397阅读模式

CSS允许您为任何HTML元素的边框设置样式。它还为您提供了一种为元素的一条或多条边设置边框样式的方法。

下面的示例演示可用于将样式应用于任何HTML元素的边框的各种CSS属性。文章源自你的网络首码项目网-https://www.youranweb.com/258.html

设置所有边的边框

若要为元素的所有边设置边框样式,请使用border-width、border-style和border-color属性。还可以使用border属性一次设置所有属性。文章源自你的网络首码项目网-https://www.youranweb.com/258.html

border-widthborder-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>
相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论