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

来源：互联网发布：电脑为什么找不到网络编辑：程序博客网时间：2024/05/22 00:08

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>

1 0