摘要：总结并做了一个简单的边框效果，代码和效果图已上传设置盒子边框为10个像素宽上右下左分别为：红黄绿蓝,实线 虚线 双线 点鼠标移动上去变为带阴影的绿色圆圈，并将阴影改为内部阴影边框设置方法：给元素加上border属性 border有三个属性值：宽度，颜色，样式。1- 边框宽度：用数字+px(像素单位)表示， 如：border:2px，表示设置了2个像素宽的边框 2- 边框颜色：颜色的英文名
总结并做了一个简单的边框效果，代码和效果图已上传
设置盒子边框为10个像素宽
上右下左分别为：
红黄绿蓝,实线 虚线 双线 点
鼠标移动上去
变为带阴影的绿色圆圈，并将阴影改为内部阴影
边框设置方法：给元素加上border
属性 border有三个属性值：宽度，颜色，样式。
1- 边框宽度：用数字+px(像素单位)表示， 如：border:2px，表示设置了2个像素宽的边框
2- 边框颜色：颜色的英文名字或对应的值， 如border:red，或border:#ccc
3- 边框样式：（实线solid，双实线double 虚线dashed 点dotted）
4- 如果用复合样式，如border:1px 2px 3px 4px; 四个宽度按顺序分别指的是上右下左四个边框
5- 盒子四个边框均可单独设置，分别为：border-top/right/bottom/left。
6- 边框阴影可以用box-shadow设置，如：box-shadow:10px 10px 10px red;其中四个值分别为：水平偏移值，垂直偏移值，模糊值，颜色
https://code.sololearn.com/W5uud3Y4gUa5/#html
代码和效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>边框练习</title>
<style type="text/css">
* {
margin: 0;
}
p {
margin: 0 auto;
width: 810px;
font-size: 20px;
height: 180px;
text-align: center;
color: royalblue;
background: blanchedalmond;
}
#content {
font-size: 20px;
border: 5px solid olive;
margin: 0 auto;
width: 800px;
height: 300px;
}
.box {
margin: 0 auto;
margin-top: 10px;
width: 300px;
height: 300px;
border-top: 10px solid red;
border-right: 10px dashed yellow;
border-bottom: 10px double green;
border-left: 10px dotted blue;
box-shadow: 10px 150px 100px grey;
}
.box:hover {
box-shadow: 0px 0px 250px grey inset;
border-radius: 50%;
}
</style>
</head>
<body>
<p>设置盒子边框为10个像素宽<br>上右下左分别为：<br>红黄绿蓝,实线 虚线 双线 点<br>鼠标移动上去<br />变为带阴影的绿色圆圈，并将阴影改为内部阴影</p>
<div id="content">
边框设置方法：给元素加上border<br>属性 border有三个属性值：宽度，颜色，样式。<br> 1- 边框宽度：用数字+px(像素单位)表示， 如：border:2px，表示设置了2个像素宽的边框 <br>2- 边框颜色：颜色的英文名字或对应的值， 如border:red，或border:#ccc <br>3- 边框样式：（实线solid，双实线double 虚线dashed 点dotted） <br>4- 如果用复合样式，如border:1px 2px 3px 4px; 四个宽度按顺序分别指的是上右下左四个边框<br> 5- 盒子四个边框均可单独设置，分别为：border-top/right/bottom/left。 <br>6- 边框阴影可以用box-shadow设置，如：box-shadow:10px 10px 10px red;其中四个值分别为：水平偏移值，垂直偏移值，模糊值，颜色
</div>
<hr />
</div>
<div id="out">
<div class="box">
</div>
</div>
</body>
</html>
批改老师：查无此人批改时间：2018-11-25 09:21:39
老师总结：写的不错，可以多看看框架，别人的边框怎么写的，这样自己做会更好看。
