首页 > 其他分享> > 【汇智学堂】CSS应用之三

【汇智学堂】CSS应用之三

2020-02-20 17:02:38 作者：互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="css/css3.css">

</head>
<body>
    <div id="simple">Simple Border</div>
    <div id="dashed">Dashed Border</div>
    <div id="dotted">Dotted Border</div>
    <div id="groove">Groove Border</div>
    <div id="inset">Inset Border</div>
    <div id="outset">Outset Border</div>
    <div id="ridge">Ridge Border</div>
    <div id="round">Rounder Border</div>
    <div id="veryround">Rounder Border</div>
    <div id="shadow">Outset shadow</div>
    <div id="ishadow">Inset shadow</div>
    <div id="mixed">Mixed Border</div>
    <div id="button">Button</div>
</body>
</html>

div{
    width:200px;
    margin:5px;
    padding:2px;
    text-align: center;
}

#simple{
    border:1px solid black;
}

#dashed{
    border:1px dashed black;
}

#dotted{
    border:1px dotted gray;
}

#groove{
    border:5px groove blue;
}

#inset{
    border:5px inset red;
}

#outset{
    border:5px outset blue;
}

#ridge{
    border:5px ridge black;
}

#round{
    border:1px solid;border-radius: 5px;
}

#veryround{border:1px solid;border-radius: 50%}
#shadow{
    margin:10px;
    border:1px solid black;
    box-shadow: 5px 5px 3px 2px blue;
}

#ishadow{
    margin:15px;
    border:1px solid black;
    box-shadow: 5px 5px 3px 2px blue inset;
}

#mixed{
    border-top: 1px solid;
    border-top-left-radius: 5px;
    border-left: 1px dotted;
    border-bottom: 5px ridge;
    border-bottom-right-radius: 10px;
}

#button{
    width:150px;
    background-color: #2233FF;
    color:white;
    border:5px outset blue;
    border-radius:50%;
}

雷玉广发布了352 篇原创文章 · 获赞 48 · 访问量 3万+ 私信关注

标签：solid,border,之三,汇智,1px,radius,5px,Border,CSS
来源： https://blog.csdn.net/weixin_39593940/article/details/104413726