《HTML+CSS+JavaScript》之第15章边框样式

mali378287007

于 2022-07-05 08:05:23 发布

阅读量228

点赞数

分类专栏： css 整理学习文章标签： css

本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125612073

版权

整理同时被 3 个专栏收录

181 篇文章 11 订阅

订阅专栏

学习

130 篇文章 4 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

《HTML+CSS+JavaScript》之第15章边框样式

15.1 边框样式简介

几乎所有元素都可以定义边框。
边框样式需同时定义border-width、border-style、border-color属性，才会有效果。

边框样式属性

属性	说明
border-width	边框宽度
border-style	边框外观（虚线，实线等）
border-color	边框颜色

15.2 整体样式

15.2.1 边框属性

border-width
边框宽度，取值像素值。
border-style
边框外观，none、dashed、solid、hidden、dotted、double等。
border-color
边框颜色

div加上边框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*定义所有div样式*/
        div
        {
            width:100px;
            height:30px;
        }
        /*定义单独div样式*/
        #div1{border:1px dashed red;}
        #div2{border:1px solid red;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

img加上边框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img
        {
            border-width: 2px;
            border-style:solid;
            border-color:red;
        }
    </style>
</head>
<body>
    <img src="img/haizei.png" alt="海贼王之索隆">
</body>
</html>

15.2.2 简写形式

border: 1px solid red;

等价于

border-width:1px;
border-style:solid;
border-color:red;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{border:1px solid red;}
    </style>
</head>
<body>
    <div>绿叶学习网，给你初恋般的感觉。</div>
</body>
</html>

15.3 局部样式

单独一条边进行设置。

上边框border-top

border-top-width:1px;
border-top-style:solid;
border-top-color:red;

border-top: 1px solid red;

下边框border-bottom

border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:red;

border-bottom: 1px solid red;

左边框border-left

border-left-width:1px;
border-left-style:solid;
border-left-color:red;

border-left: 1px solid red;

右边框border-right

border-right-width:1px;
border-right-style:solid;
border-right-color:red;

border-right: 1px solid red;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:100px;                       /*div元素宽为100px*/
            height:60px;                       /*div元素高为60px*/
            border-top:2px solid red;          /*上边框样式*/
            border-right:2px solid yellow;     /*右边框样式*/
            border-bottom:2px solid blue;      /*下边框样式*/
            border-left:2px solid green;       /*左边框样式*/
         }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:100px;                 /*div元素宽为100px*/
            height:60px;                 /*div元素高为100px*/
            border:1px solid red;        /*边框整体样式*/
            border-bottom:0px;           /*去除下边框*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

等价

border-bottom:0px;
border-bottom:0;
border-bottom:none;

mali378287007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《HTML+CSS+JavaScript》之第15章边框样式

css边框样式
复制链接

扫一扫

专栏目录

《HTML+CSS+JavaScript》之第15章 边框样式

《HTML+CSS+JavaScript》之第15章 边框样式

15.1 边框样式简介

15.2 整体样式

15.2.1 边框属性

15.2.2 简写形式

15.3 局部样式

《HTML+CSS+JavaScript》之第15章边框样式

《HTML+CSS+JavaScript》之第15章边框样式