html页面边框的另一种写法

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>边框</title>

         <style type="text/css">

             div{

                 width: 300px;

                 height: 300px;

                 /*border: 1px solid red; 复合样式*/

                 /*单一样式*/

                 border-width: 1px 2px 3px 4px;

                 border-style: solid dashed dotted solid;

                 border-color: red blue black pink;

                 /*四个值依次分别对上、右、下、左赋值*/

                 /*当只有两个值时一次分别对上/下、左/右赋值*/

                 /*当放三个值时依次分别对上、左/右、下赋值*/

                 border-top: 10px solid yellow;

                 /*单独对上边框进行赋值，

                  border-bottom为下边框

                  border-left为左边框

                  border-right为右边框

                  * */

                 border-bottom-color: hotpink;

                 /*单独对下边框颜色进行复制*/

             }

         </style>

     </head>

     <body>

         <div>

         </div>

     </body>

 </html>

注意：边框其实不是一个矩形，当你把上边变得颜色设置的不同时你会发现变得是一个梯形，而如果你把div的宽和高设置为0的话，这个有变得不是梯形，他的上低也会变为0，成为一个三角形，这个在面试前端工作时，面试官有可能会问到

巴特西

html页面边框的另一种写法

最新文章

热门文章