HTML5基础加强css样式篇（css属性border详解（一））（三十三）

最新推荐文章于 2023-05-20 17:07:21 发布

咸鸭蛋炒饭

最新推荐文章于 2023-05-20 17:07:21 发布

阅读量1.1k

点赞数 2

分类专栏： HTML5基础篇

本文链接：https://blog.csdn.net/u010853130/article/details/69258968

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.border 边框简介：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
          .box{
              width: 50px;
              height: 50px;
              /*边框*/
              border-top: 20px solid yellow;
              border-right: 20px solid blue;
              border-bottom: 20px solid red;
              border-left: 20px solid green;
              /*内容区域颜色*/
              background-color: darkgoldenrod;
          }
    </style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

2.利用border画出小三角：注不要设置宽，高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 0px;
            height: 0px;
            /*background-color: orange;*/
            transform: rotate(-45deg);


            border-top: 20px solid transparent;
            border-left: 20px solid blue;
        }

        .box:hover {
            /* 鼠标悬浮时样式 */

        }
    </style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">
</script>
</body>
</html>