边框border课程总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框border课程小结</title>
<style type="text/css">
* {
margin: 5px;
padding: 5px
}
.solid {
width: 50%;
font-size: 20px;
border: 5px solid #ccc
}
.double {
width: 50%;
font-size: 20px;
border: 5px double #ccc
}
.dashed {
width: 50%;
font-size: 20px;
border: 5px dashed #ccc
}
.dotted {
width: 50%;
font-size: 20px;
border: 5px dotted #ccc
}
.top {
width: 50%;
font-size: 20px;
border-top: 5px solid aqua;
border-bottom: 5px solid blue;
border-right: 5px solid blueviolet;
border-left: 5px solid brown;
}
button {
width: 150px;
height: 50px;
border: none;
}
.radius {
width: 50%;
font-size: 20px;
border: 5px solid #ccc;
border-radius: 20px;
}
.radius1 {
width: 50%;
font-size: 20px;
border: 5px solid #ccc;
border-radius: 15px 10px 20px 0px;
}
.shadow {
width: 50%;
font-size: 20px;
border: 1px solid #ccc;
box-shadow: 10px 5px 10px green;
}
.shadow_inset {
width: 50%;
font-size: 20px;
border: 1px solid #ccc;
box-shadow: 0px 0px 20px red inset;
}
</style>
</head>
<body>
<h2>边框border课程小结</h2>
<p>1.border用来设置标签的边框样式</p>
<p id="div1">2.常用复合写法：</p>
<pre class="solid"> border: 1px(边框宽度) solid(边框样式) #ccc(边框颜色);</pre>
<pre class="double"> 边框样式:double双层边框</pre>
<pre class="dashed"> 边框样式:dashed虚线边框</pre>
<pre class="dotted"> 边框样式:dotted点状边框</pre>
<p>3.控制单层边框</p>
<pre class="top"> 上边框：border-top；下边框:border-bottom；左边框：border-left；右边框：border-right</pre>
<p>4.清除元素边框</p>
<button>border:none</button>
<p>5.设置圆角</p>
<pre class="radius"> border-radius: 20px；值代表圆角半径，正方形大小设置半径后变成圆</pre>
<pre class="radius1"> border-radius: 15px(左上) 10px(右上) 20px(右下) 0px(左下);<br> 设置2个border-radius: 15px(左上 右下) 10px(左下 右上);设置3个无效果</pre>
<p>6.设置边框阴影</p>
<pre class="shadow"> box-shadow: 10px(x轴偏移距离) 5px(Y轴偏移距离) 10px(阴影模糊半径值越大越模糊) #ccc(阴影颜色);</pre>
<pre class="shadow_inset"> box-shadow: 0px 0px 10px red inset(阴影向内扩展);</pre>
</body>
</html>
