CSS 边框样式

·  阅读 466

在网页中,几乎所有的元素都可以定义边框,边框主要有三个属性,即宽度、外观和颜色,分别由 border-width、border-style、border-color 来控制(必需同时设置三个属性)。

一、整体样式

1、边框的属性

  • border-width:定义边框的宽度,取值是一个像素值;
  • border-style:定义边框的外观,常用取值如下:
属性值说明
none无样式
dashed虚线
solid实线
  • border-color:定义边框的颜色,取值可以是关键字或者十六进制 RGB 值。

示例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                border-width: 2px;
                border-style: dashed;
                border-color: aquamarine;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
复制代码

在浏览器中的效果为:

image.png

2、简写形式

对于代码:

div{
        border-width: 2px;
        border-style: dashed;
        border-color: aquamarine;
    }
复制代码

可以简写为:

div{ border: 2px dashed aquamarine; }
复制代码

二、局部样式

一个边框共有上下左右四条边,可以单独对某一条边进行样式指定。

以上边框为例,可写为:

border-top-width:2px;
border-top-style:solid;
border-top-color:red;
复制代码

简写形式:border-top:2px solid red;

其它三个边框分别为:border-bottom、border-left、border-right。

有如下示例:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                border-top: 2px dashed aquamarine;
                border-bottom: 3px solid rebeccapurple;
                border-left: 2px dashed yellowgreen;
                border-right: 3px solid wheat;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
复制代码

在浏览器中显示为:

image.png

三、利用 border 画三角形

  • step1:首先将 div 的宽度和高度都设为 0,然后设置四个边框的颜色和宽度:
<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div{
                width: 0px;
                height: 0px;
                border-top: 50px solid aquamarine;
                border-bottom: 50px solid rebeccapurple;
                border-left: 50px solid yellowgreen;
                border-right: 50px solid wheat;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
复制代码

得到如下效果:

image.png

  • step2:将其中三个边框的颜色变为透明(transparent),便可得到三角形:
<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页,HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有,转载前请联系"/>
        <style type="text/css">
            div{
                width: 0px;
                height: 0px;
                border-top: 50px solid aquamarine;
                border-bottom: 50px solid transparent;
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
复制代码

效果如下:

image.png

分类:
前端
标签: