边框

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. ValueError: Cannot create group in read only mode.

    报错 Using TensorFlow backend. Traceback (most recent call last): File "D:/PyCharm 5.0.3/WorkSpac ...

  2. 传入值参数&传入引用参数的区别

    传值&传引用 1.传值 是把实参的值赋值给行参 那么对行参的修改,不会影响实参的值 2.传地址 是传值的一种特殊方式,只是他传递的是地址 那么传地址以后,实参和行参都指向同一个对象 3.传引用 ...

  3. vue地址栏发生变化但是页面不会更新怎么办

    话不多说直接上问题,主要是在使用router-link进行页面跳转时,使用query进行地址栏传输数据,发现当点击跳转一次之后再次点击虽然地址栏上问号后面的数据会改变,但是页面并不会更新,导致页面永远 ...

  4. lightoj 1028 - Trailing Zeroes (I)(素数筛)

    We know what a base of a number is and what the properties are. For example, we use decimal number s ...

  5. 字符编码与gcc 编译器的编码问题

    最近在 vscode 中借助 gcc 编译器来配置 c 语言开发环境时,发现中文编码存在乱码问题.再加上最近学习到多字节字符与宽字符,搅在一起,搞得很乱,就把自己的理解写下来,供有需者参考吧. 1. ...

  6. SQLi_LABS less5: GET-Double Injection - Single Quotes - String

    目录 前言 几种可能的注入方式 补充的相关知识点 前言 最近开始用SQLi_LABS学习注入,刚开始有点摸不到头脑,索性把看到的知识点记录下来,很多细节是看别人博客学的,就直接给链接了,在此向这些作者 ...

  7. 【LeetCode】406-根据身高重建队列

    title: 406-根据身高重建队列 date: 2019-04-15 21:13:06 categories: LeetCode tags: Java容器 比较器 贪心思想 题目描述 假设有打乱顺 ...

  8. hbase读取快照数据-lzo压缩遇到的问题

    1.读取hbase快照数据时报UnsatisfiedLinkError: no gplcompression in java.library.path错: 2019-09-04 17:36:07,44 ...

  9. spring boot不使用resoures而是建立一个conf

    一般配置文件都是放在rsources下,有时候我们不想放在这里,而是直接放在根目录下,那么我们应该怎么做呢? 1.在pom.xml中添加: <build> <!--<final ...

  10. 最佳内存缓存框架Caffeine

    Caffeine是一种高性能的缓存库,是基于Java 8的最佳(最优)缓存框架. Cache(缓存),基于Google Guava,Caffeine提供一个内存缓存,大大改善了设计Guava's ca ...