边框

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制作小三角

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         .box{
             width: 0px;
             height: 0px;
             border-bottom: 100px solid red;
             border-left: 100px solid transparent;
             border-right: 100px solid transparent;
         }
     </style>

 </head>
 <body>

 <div class="box"></div>

 </body>
 </html>

使用border制作圆

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         .box{
             width: 200px;
             height: 200px;
             border: 1px solid red;
             border-radius: 50%;
             background-color: green;
         }
     </style>

 </head>
 <body>

 <div class="box"></div>

 </body>
 </html>

作者:流浪者

日期:2019-08-31

06-border的更多相关文章

  1. ionic1滑动时间选择器

    上图: 1.derective代码 .directive('monthPicker', function ($ionicScrollDelegate) { return { restrict: 'E' ...

  2. 活泼的CSS 3动态气泡按钮制作

    这一次,我们正在创造一个有用的设置与对CSS3的多重背景和动画的力量动画按钮.通过此按钮包,您可以很容易地变成一个动画按钮,在您的网页上的任何链接只是指定一个类名.没有必要JavaScript.四色主 ...

  3. javascript基础06

      javascript基础06 splice var del_arr = del.splice(0,2); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返 ...

  4. WPF入门教程系列十——布局之Border与ViewBox(五)

    九. Border Border 是一个装饰的控件,此控件绘制边框及背景,在 Border 中只能有一个子控件,若要显示多个子控件,需要将一个附加的 Panel 控件放置在父 Border 中.然后可 ...

  5. 【博客美化】06.添加QQ交谈链接

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  6. W3School-CSS 边框(border)实例

    CSS 边框(border)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边 ...

  7. border边框的宽度/样式/颜色 全部值

    border 用emmet写border的时候, 缩写是:bd. 不是b, 也不是bdr: b会扩展成bottom, bdr 会扩展成 border-right, border的宽度: 1px 基本上 ...

  8. 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容

    01 HTML HTML :Hypertext Markup Language   超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...

  9. ThinkPhp学习06

    原文:ThinkPhp学习06 一.简单学习修改用户信息模块 1.编写UserAction.class.php <?php class UserAction extends Action{ pu ...

  10. iOS回顾笔记(06) -- AutoLayout从入门到精通

    iOS回顾笔记(06) -- AutoLayout从入门到精通 随着iOS设备屏幕尺寸的增多,当下无论是纯代码开发还是Xib/StoryBoard开发,自动布局已经是必备的开发技能了. 我使用自动布局 ...

随机推荐

  1. zstuoj 4423: panda和卡片

    传送门:http://oj.acm.zstu.edu.cn/JudgeOnline/problem.php?id=4423 题意: 给定许多数字,这些数字都是2的倍数,问可以用这些数字组成多少个数字. ...

  2. Kth Minimum Clique_2019牛客暑期多校训练营(第二场)

    题目连接: https://ac.nowcoder.com/acm/contest/882/D Description Given a vertex-weighted graph with N ver ...

  3. 如何设计web系统的监控

    如何使用httpclient设计开发一套web系统监控? 我之前有实现和写过关于运维和开发两个层面的监控系统的文章(https://www.cnblogs.com/zhikou/p/8576891.h ...

  4. 【Offer】[57-2] 【和为S的连续正数序列】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入一个正数s,打印出所有和为s的连续正数序列(至少含有两个数).例如,输入15,由于1+2+3+4+5=4+5+6=7+8=15,所以 ...

  5. CF785D Anton and School – 2

  6. hadoop2.7.3启动报错问题

    在日志里面可以看出是没有对应的权限,因此在hdfs_site.xml中添加 <property> <name>dfs.permissions</name> < ...

  7. 关于git远程被覆盖的问题

    有同事A和B,git远程版本为A0,两个人的本地项目已经跟远程同步.同事A先向git提交了3次,A1.A2.A3.git远程版本为A0.A1.A2.A3.同事B也向git提交了1次B1,但是同事B提交 ...

  8. .Net基础篇_学习笔记_第六天_For循环语法

    For循环:专门处理已知循环次数的循环.  小技巧:连续敲击两下TAB键循环体自动搭建完成. For循环语法: for(表达式1;表达式2;表达式3){ 循环体;}表达式1一般为声明循环变量,记录循环 ...

  9. Hibernate,一对多,多对一

    Hibernate环境的配置 hibernate.cfg.xml的配置 <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE hibern ...

  10. Python中使用moviepy进行视频分割

    场景 moviepy官网: https://pypi.org/project/moviepy/ 是一个用于视频编辑的Python库:切割.连接.标题插入.视频合成.非线性编辑,视频处理和定制效果的创建 ...