abstrait：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>邊框border課程小結(jié)</
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邊框border課程小結(jié)</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課程小結(jié)</h2>
<p>1.border用來(lái)設(shè)置標(biāo)簽的邊框樣式</p>
<p id="div1">2.常用復(fù)合寫(xiě)法：</p>
<pre class="solid"> border: 1px(邊框?qū)挾? solid(邊框樣式) #ccc(邊框顏色);</pre>
<pre class="double"> 邊框樣式:double雙層邊框</pre>
<pre class="dashed"> 邊框樣式:dashed虛線邊框</pre>
<pre class="dotted"> 邊框樣式:dotted點(diǎn)狀邊框</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.設(shè)置圓角</p>
<pre class="radius"> border-radius: 20px；值代表圓角半徑，正方形大小設(shè)置半徑后變成圓</pre>
<pre class="radius1"> border-radius: 15px(左上) 10px(右上) 20px(右下) 0px(左下);<br> 設(shè)置2個(gè)border-radius: 15px(左上 右下) 10px(左下 右上);設(shè)置3個(gè)無(wú)效果</pre>
<p>6.設(shè)置邊框陰影</p>
<pre class="shadow"> box-shadow: 10px(x軸偏移距離) 5px(Y軸偏移距離) 10px(陰影模糊半徑值越大越模糊) #ccc(陰影顏色);</pre>
<pre class="shadow_inset"> box-shadow: 0px 0px 10px red inset(陰影向內(nèi)擴(kuò)展);</pre>
</body>
</html>
Professeur correcteur：滅絕師太Temps de correction：2019-02-26 09:19:17
Résumé du professeur：你的布局倒是思路清奇,下次用div就好了!