边框总结及案例

原创 2018-11-28 16:05:24 202
摘要:  border:solid(实线)double(双)dashed(--) dotted(....)  border-radius:边角弧度  border:none 无边框border-top left bottom ritght:上 左 下 右box-shadow:x轴 y轴 宽度 颜色  inset(内部)<!DOCTYPE 

  border:solid(实线)double(双)dashed(--) dotted(....) 

 border-radius:边角弧度  border:none 无边框

border-top left bottom ritght:上 左 下 右

box-shadow:x轴 y轴 宽度 颜色  inset(内部)

<!DOCTYPE html>
<html>
<head>
       <meta charset="utf-8">
       <title>边框</title>
       <link rel="stylesheet" type="text/css" href="images/logo.png">
       <style type="text/css">
              .box{width: 200px;height: 200px;border: 1px /*solid double dashed */dotted #ccc;border-radius: 100px;}
              .main{width: 200px;height: 200px;border-top: 1px solid red;background: #ccc;border-left:1px solid red; }
            .shadow{width: 100%;height: 100px;box-shadow:0px 6px 35px blue inset;font-size: 50px;line-height: 100px;text-align: center;}
            .button{border: none;}
       </style>
</head>
<body>
       <div>边框样式</div>
   <div></div>
   <div></div>
   <button>去边框</button>
</body>
</html>


批改老师:灭绝师太批改时间:2018-11-28 16:30:48
老师总结:作业完成的不错,还需要找点案例巩固一下!

发布手记

热门词条