前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

网页制作里的边框border常见用法(包含圆角)【210】

  • border就是边框

一、以下是边框最常见的用法,我们先做一个盒子box,给个简单宽高样式。

二、这种三个参数的写法,应该是用得比较多的。

三、如果这四条边,你只想要一条或两条三条,可以通过top、left、right、bottom来实现。

四、再来一条右边的线。

五、补一个小知识点,圆角。

六、border-radius也有四个参数的写法。

七、当圆角圆到一定的程度,盒子就成了一个圆形。


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .box{
 width: 300px;
 height: 300px;
 border: 2px solid #369;
 /* 1是边框的宽,2是边框样式solid是实线,3是边框颜色 */
 /* dotted点线double双线dashed虚线 */
 border-radius: 0px 20px 0px 20px;
 /* 分别是左上,右上,右下,左下*/
 }
 </style>
</head>
 <div class="box"></div>
</body>
</html>

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言