边框 border 通常简写为 "border:1px solid red;" 但其实一个完整的 border 边框其实是由 1.border-width / 边框宽度 /,2.border-style / 边框样式 /,3.border-color / 边框色彩 / 三大属性构成构成;**
border 边框方位分为 border-top / 边框上方 / border-bottom / 边框底部 / border-left / 边框左边 / border-right / 边框右边 /;
边框属性样式整理: border-style:none;/ 无边框 / border-style:hidden;/ 隐藏边框 / border-style:dotted;/ 点状虚线 / border-style:dashed;/ 块状虚线 / border-style:solid;/ 实线 / border-style:double;/ 双线 /(至于 border-style:groove;border-style:ridge;border-style:inset;border-style:outset; 效果用到较少, 通常 solid,dashed,none);
专门建立的学习 Q-q-u-n: 784783012 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>11 种常用 CSS 样式之 border 学习 </title>
- <style type="text/css">
- /* 边框简写 */
- .box,.box2{
- padding: 10px;
- border-width: 5px;
- }
- .box{
- /* border: 5px inset red; */
- border-style: inset;
- border-color: red;
- }
- /* 边框样式 */
- .box1{
- border-style: none;/* 无边框 */
- border-style:hidden;/* 隐藏边框 */
- border-style: dotted;/* 点状虚线 */
- border-style: dashed;/* 块状虚线 */
- border-style: solid;/* 实线 */
- border-style: double;/* 双线 */
- border-style:groove;
- border-style:ridge;
- border-style:inset;
- border-style:outset;
- border-width: 5px;
- border-color: #f90;
- }
- /* 边框方位 */
- .box2{
- margin: 10px;
- border-left: 10px groove cadetblue;
- border-right: 10px ridge magenta;
- border-top: 10px inset yellow;
- border-bottom: 10px outset khaki;
- }
- </style>
- </head>
- <body>
- <div class="box">
- <div class="box1">
兄弟, 好久不见了, 挺念叨你的, 不知道现在在哪发财, 去跟你混了 Brother 47 </div>
- <div class="box2">
- it's been a long time since I missed you. I don't know where I'm getting rich now. 50 </div>
- </div>
- </body>
- </HTML>
来源: http://www.jianshu.com/p/d528ff2a2f20