一天搞定CSS:边框border--02

每一个标签都是一个盒子,具体见HTML教程

因此,每一个标签有大小,有边框


1.border样式:单一样式

这里写图片描述


2.border样式:复合样式

border: 粗细 类型 颜色;

这里写图片描述


3.border方向

一天搞定CSS:初识css--01


4.代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 300px;
                height: 300px;

                /*单一样式*/
                border-color: red;
                border-width: 4px;
                border-style: solid;

                /*复合样式*/
                border: 4px solid red;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

边框方向:以top为例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 300px;
                height: 300px;

                /*单一样式*/
                border-top-color: red;
                border-top-width: 4px;
                border-top-style: solid;

                /*复合样式*/
                border-top: 4px solid red;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
posted @   TCB_Java  阅读(133)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示