border和box-shadow用法

原创 2019-05-05 14:45:28 514
摘要:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>学习css第三节课 --边框</title>    <style type

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>学习css第三节课 --边框</title>
   <style type="text/css">
.box{width: 100px;height: 100px;border: 1px /* solid实线 double双线 dashed虚线 dotted 点状虚线*/ solid  #ccc;border-radius: 50%;}
       .main{width: 100px;height: 100px;border-top: 1px solid red; background: #ccc;margin-top: 50px;}
       button{border: none;}
       .shadow{width: 100px;height: 100px;border: 1px solid red; box-shadow: 1px 2px 3px;}
   </style>
</head>
<body>
<div class="box">111</div>
<div class="main">222</div>
<button>登录</button>
<div class="shadow">

</div>
</body>
</html>

批改老师:天蓬老师批改时间:2019-05-05 14:51:23
老师总结:边框是盒模型中最有意义的部分, 也内外边距不同, 边框除了宽度外, 还有样式和颜色

发布手记

热门词条