11种常用css样式之border学习

逃跑的火焰 · 发表于 2020-3-22 10:00:10

本站资源全部免费,回复即可查看下载地址!

您需要登录才可以下载或查看，没有帐号？立即注册

x

边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-style/*边框样式*/,3.border-color/*边框色彩*/三大属性构成构成;

border边框方位分为border-top/*边框上方*/border-bottom/*边框底部*/border-left/*边框左边*/border-right/*边框右边*/;

边框属性样式整理：border-style:none;/*无边框*/border-style:hidden;/*隐藏边框*/border-style:dotted;/*点状虚线*/border-style:dashed;/*块状虚线*/border-style:solid;/*实线*/border-style:double;/*双线*/（至于border-style:groove;border-style:ridge;border-style:inset;border-style:outset;效果用到较少，通常solid,dashed,none）;

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11种常用css样式之border学习</title>
    <style type="text/css">
    /*边框简写*/
    .box,.box2{
        padding: 10px;
        border-width: 5px;
    }
    .box{
        /* border: 5px inset red; */
        border-style: inset;
        border-color: red;
    }
    /*边框样式*/
    .box1{
        border-style: none;/*无边框*/
        border-style:hidden;/*隐藏边框*/
        border-style: dotted;/*点状虚线*/
        border-style: dashed;/*块状虚线*/
        border-style: solid;/*实线*/
        border-style: double;/*双线*/
        border-style:groove;
        border-style:ridge;
        border-style:inset;
        border-style:outset;
        border-width: 5px;
        border-color: #f90;
    }
    /*边框方位*/
    .box2{
        margin: 10px;
        border-left: 10px groove cadetblue;
        border-right: 10px ridge magenta;
        border-top: 10px inset yellow;
        border-bottom: 10px outset khaki;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            兄弟,好久不见了,挺念叨你的,不知道现在在哪发财,去跟你混了Brother
        </div>
        <div class="box2">
            it's been a long time since I missed you. I don't know where I'm getting rich now.
        </div>
    </div>
</body>
</html>

		自动登录	找回密码
密码			立即注册

[Html/Css] 11种常用css样式之border学习

本站资源全部免费,回复即可查看下载地址!