06-border
程序员文章站
2022-03-20 21:09:34
边框 border:边框,描述盒子的边框 边框的三要素:粗细 线性样式 颜色 例如:border:1px solid red; 如果颜色不写,默认是黑色;如果粗细不写,不显示边框;如果只写线性样式,默认有3px的粗细,线性样式,颜色默认是黑色。 border的写法 1.常用写法 border:1px ......
边框
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
上一篇: Eclipse安装STS插件
下一篇: python特殊的类属性
推荐阅读