css中边框样式

Original 2019-02-11 15:56:32 279
abstract:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>css中边框样式</title>    <style>  

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>css中边框样式</title>
   <style>
       div{ margin: 5px;}
           #box1{ width:100px;height: 100px;border: 1px  solid; line-height: 100px; text-align: center}
           #box2{ width:100px;height: 100px;border: 2px  double; line-height: 100px; text-align: center}
           #box3{ width:100px;height: 100px;border: 1px  dashed; line-height: 100px; text-align: center}
           #box4{ width:100px;height: 100px;border: 1px  dotted; line-height: 100px; text-align: center}
           #box5{ width:100px;height: 100px;border: 1px  solid; border-radius: 20px; line-height: 100px; text-align: center}
           #box6{ width:100px;height: 100px;border:none; background: #0ba4da; line-height: 100px; text-align: center}
           #box7{ width:100px;height: 100px;border:1px solid; box-shadow: 5px 5px 5px#aaa; background: #0ba4da; line-height: 30px; text-align: center}
           #box8{ width:100px;height: 100px; box-shadow: 0px 0px 30px 10px inset #aaa;  line-height: 100px; text-align: center}
   </style>
</head>
<body>
<div id="box1">实线</div>
<div id="box2">双实线</div>
<div id="box3">虚线</div>
<div id="box4">圆点虚线</div>
<div id="box5">圆角</div>
<div id="box6">无边框</div>
<div id="box7">阴影box-shadow: x y 模糊距离</div>
<div id="box8">内阴影</div>
</body>
</html>

Correcting teacher:灭绝师太Correction time:2019-02-11 16:06:19
Teacher's summary:测试的比较全面,后期要运用的实例,继续加油!

Release Notes

Popular Entries