当前位置： 移动技术网 > IT编程>脚本编程>Python > 06-border

06-border

2019年08月31日  | 移动技术网IT编程  | 我要评论

菜鸟卧底by红茶,coser小美,赵容

边框                                            

border：边框，描述盒子的边框

边框的三要素：粗细 线性样式 颜色

例如：border：1px solid red；

如果颜色不写，默认是黑色；如果粗细不写，不显示边框；如果只写线性样式，默认有3px的粗细，线性样式，颜色默认是黑色。

border的写法                             

1.常用写法                                                   

border：1px solid green；

线性样式种类：solid（实线）、dotted（点线）、dobule（双实线）、dashed（虚线）

2.三要素写法                                              

border-width：3px；

border-style：solid；

border-color：red；

3.按方向来写                                              

border-top：10px solid green；

border-right：10px solid green；

border-bottom：10px solid green；

border-left：10px solid green；

 

还可以这样写:border-top-width：10px；

　　　　　　 border-top-style：solid；

　　　　　　 border-top-color：red；

 

4.不设置样式                                             

border：none；

border：0；

使用border制作小三角             

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>流浪者</title>
 6     <style>
 7         .box{
 8             width: 0px;
 9             height: 0px;
10             border-bottom: 100px solid red;
11             border-left: 100px solid transparent;
12             border-right: 100px solid transparent;
13         }
14     </style>
15 
16 </head>
17 <body>
18 
19 <div class="box"></div>
20     
21 </body>
22 </html>

 

使用border制作圆                               

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>流浪者</title>
 6     <style>
 7         .box{
 8             width: 200px;
 9             height: 200px;
10             border: 1px solid red;
11             border-radius: 50%;
12             background-color: green;
13         }
14     </style>
15 
16 </head>
17 <body>
18 
19 <div class="box"></div>
20     
21 </body>
22 </html>

 

 

 

 

作者：流浪者

日期：2019-08-31

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网