css3-4 css3边框样式

一、总结

一句话总结：

二、css3边框样式

1、相关知识

边框属性:
1.border-width
2.border-style
3.border-color

边框方位:
1.border-left:1px solid #f00;
2.border-top:1px solid #f00;
3.border-right:1px solid #f00;
4.border-bottom:1px solid #f00;

2、代码

border边框方位实例

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;    
 9         }
10 
11         p{
12             border-left:5px solid #f00;
13             padding-left:5px;
14         }
15     </style>
16 </head>
17 <body>
18     <p>linux is very much!</p>
19     <p>linux is very much!</p>
20     <p>linux is very much!</p>
21     <p>linux is very much!</p>
22     <p>linux is very much!</p>
23     <p>linux is very much!</p>
24 </body>
25 </html>

边框样式

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         div{
 8             width:1000px;
 9             height:200px;
10 
11             /*border-style:solid;*/
12             /*border-style:dotted;*/
13             /*border-style:dashed;*/
14             /*border-style:double;*/
15             /*border-style:inset;*/
16             /*border-style:outset;*/
17             /*border-style:groove;*/
18             border-style:ridge;
19             border-width:10px;
20             border-color:#f00;
21         }
22     </style>
23 </head>
24 <body>
25     <div>
26         <span>html5+css3</span>    
27     </div>    
28 </body>
29 </html>