边框

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. 《阿里巴巴Java开发手册1.4.0》阅读总结与心得（四）

    (七)设计规约 1. [强制] 存储方案和底层数据结构的设计获得评审一致通过,并沉淀成为文档. 说明: 有缺陷的底层数据结构容易导致系统风险上升,可扩展性下降,重构成本也会因历史数据迁移和系统平滑过渡 ...

  2. 提升RabbitMQ消费速度的一些实践

    RabbitMQ是一个开源的消息中间件,自带管理界面友好.开发语言支持广泛.没有对其它中间件的依赖,而且社区非常活跃,特别适合中小型企业拿来就用.这篇文章主要探讨提升RabbitMQ消费速度的一些方法 ...

  3. [python]python列表、元组

    1. 列表和元组简介 列表:用中括号[]包裹,元素的个数及元素的值可以改变. 元组:用小括号()包裹,不可用更改. 通过切片运算[]和[:]可以得到子集. 2.列表 示例: List = [1, 2, ...

  4. hdu6333 Harvest of Apples 离线+分块+组合数学（求组合数模板）

    Problem B. Harvest of Apples Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K ...

  5. yzoj2057 x 题解

    题意:给出一个集合,要求把这个集合分成两部分,使得一个集合中的任一元素都与另一个集合的全部元素都两两互质 暴力 枚举每个元素O(n^2)再暴力判gcd=1,如果非1就放入不同集合内,用并查集维护联通块 ...

  6. JS数据结构第六篇 --- 二叉树力扣练习题

    1.第226题:翻转二叉树 递归+迭代两种实现方式: /** 反转二叉树 * Definition for a binary tree node. * function TreeNode(val) { ...

  7. adb命令介绍

    1.adb logcat -v time -s ActivityManager:I 获取包名和activity 2. adb logcat "ActivityManager" |g ...

  8. Go语言基础之基本数据类型

    Go语言中有丰富的数据类型,除了基本的整型.浮点型.布尔型.字符串外,还有数组.切片.结构体.函数.map.通道(channel)等.Go 语言的基本类型和其他语言大同小异. 基本数据类型 整型 整型 ...

  9. java多线程之ScheduleThreadPoolExecutor

    ScheduledThreadPoolExecutor 介绍   ScheduledThreadPoolExecutor 是一个可以实现定时任务的 ThreadPoolExecutor(线程池).比 ...

  10. <xsl:apply-templates>和<xsl:call-template>的区别

    <xsl:apply-templates> 应用模板,故名思意,将定义好的模板应用到 XML 的节点上.  可以调用 XML 文档的节点,使 XSL 文档可以渲染 XML 元素内的数据,  ...