html div边框线怎么设置


本文摘自PHP中文网,作者青灯夜游,侵删。

html div元素边框线可以使用border相关属性来设置:1、border属性同时设置上下左右边框样式;2、border-top、border-bottom、border-left和border-right属性分别设置上下左右边框样式。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS边框属性允许你指定一个元素边框的样式和颜色。

示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style type="text/css">

            div {

                width: 250px;

                margin: 50px 0px;

                padding: 20px 10px;

            }

            .box1{

                border: 1px solid red;

            }

            .box2{

                border-top: 1px solid green;

            }

            .box3{

                border-bottom: 1px solid green;

            }

            .box4{

                border-left: 1px solid green;

            }

            .box5{

                border-right: 1px solid green;

            }

 

        </style>

    </head>

 

    <body>

        <div class="box1">border属性设置使用边框样式</div>

        <div class="box2">border-top属性设置上边框样式</div>

        <div class="box3">border-bottom属性设置下边框样式</div>

        <div class="box4">border-left属性设置左边框样式</div>

        <div class="box5">border-right属性设置右边框样式</div>

    </body>

 

</html>

效果图:

阅读剩余部分

相关阅读 >>

Html怎样用style添加属性示例

Html的table鼠标拖拽排序该如何实现

Html的意思是什么

手把手教你在Html中引入另一个Html文件的方法(详解)

Html怎么实现滚动文字效果

HtmlHtml5的区别是什么

使用Html和css实现康奈尔笔记的模板

Html条件注释用法诠释

使用Html应该如何编写邮件模版

Html怎么设置加粗

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...