WEB前端开发工程师学习第二天边框

最新推荐文章于 2021-12-14 15:43:01 发布

weixin_33720078

最新推荐文章于 2021-12-14 15:43:01 发布

阅读量53

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/mayanlianggcs/p/9513354.html

版权

1.边框的组成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 400px;
                height: 400px;
                border:1px solid red;
            }
        </style>
        <!--
            边框组成
                1、边框的粗细
                2、边框的样式
                3、边框的颜色
        -->
    </head>
    <body>
        <div></div>
    </body>
</html>

2.边框的方向

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 400px;
                height: 400px;
                border: 1px solid red;
                border-right:5px dashed black;
            }
        </style>
        <!--
            边框的方向
                top right bottom left
                
            border
                border-top
                border-right
                border-bottom
                border-left
        -->
    </head>
    <body>
        <div></div>
    </body>
</html>

3.边框的组成和方向

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 400px;
                height: 400px;
                border: 1px solid red;
                border-top-color: black;
            }
        </style>
        <!--
            边框组成
                1、边框的粗细
                2、边框的样式
                3、边框的颜色
                
            边框的方向
                top right bottom left
                
            border
                border-top
                    border-top-width
                    border-top-style
                    border-top-color
                border-right
                    border-right-width
                    border-right-style
                    border-right-color
                border-bottom
                    border-bottom-width
                    border-bottom-style
                    border-bottom-color
                border-left
                    border-left-width
                    border-left-style
                    border-left-color
        -->
    </head>
    <body>
        <div></div>
    </body>
</html>

4.边框的形状

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 0px;
                height: 0px;
                border: 20px solid red;
                border-top-color:black;
            }
        </style>
        <!--
            边框的形状：非矩形
        -->
    </head>
    <body>
        <div></div>
    </body>
</html>

5.边框三角形

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 0;
                height: 0;
                border: 10px solid #fff;
                /*border-top-color:#ccc;*/
                border-left-color:#ccc;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>