边框

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 8 为什么引入 lambda

    转载:https://www.cnblogs.com/keeya/p/11404631.html 在Java8出现之前,如果你想传递一段代码到另一个方法里是很不方便的.你几乎不可能将代码块到处传递,因 ...

  2. HDU4348To the moon主席树，区间修改

    题意: 一个长度为n的数组,4种操作 : (1)C l r d:区间[l,r]中的数都加1,同时当前的时间戳加1 . (2)Q l r:查询当前时间戳区间[l,r]中所有数的和 . (3)H l r ...

  3. 图论之拓扑排序 poj1128 Frame Stacking

    题目网址 http://poj.org/problem?id=1128 思路:遍历找出每一种字母出现的最大和最小的横纵坐标,假如本应出现字母A的地方出现了字母B,那么A一定在字母B之前,这就相当于点A ...

  4. hdu 5902 GCD is Funny

    Problem Description Alex has invented a new game for fun. There are n integers at a board and he per ...

  5. git连接远程分支

    今天在再用git连接到远程的dev分支的时候出现了下面的情况 $ git checkout -b dev origin/dev fatal: 'origin/dev' is not a commit ...

  6. 为什么spark中只有ALS

    WRMF is like the classic rock of implicit matrix factorization. It may not be the trendiest, but it ...

  7. 【Nginx】实现动静分离

    一.概述 1.1 动态页面与静态页面区别 1.2 什么是动静分离 1.3 为什么要用动静分离 二.Nginx实现动静分离 2.1 架构分析 2.2 配置 三.动静分离与前后分离区别: 四.一些问题 一 ...

  8. CodeBenchmark之压力测试详解

    CodeBenchmark是一款高性能可视化的并发测试组件,通过组件可以对任意逻辑代码或服务进行并发测试:组件最终通过可视化的方式来显示测试结果,在测试结果中可以看到具体的并发情况和处理延时的分布.组 ...

  9. openresty域名动态解析

    工作中使用openresty,使用第三方服务API通过域名访问.但是,域名通过DNS解析出来之后,在openresty是有 配置解析阶段 很多时候我们会在 Nginx 配置文件里配置上一些域名,比如配 ...

  10. 数据库高级:SQL-CREATE-TABLE语句

    作者:松软科技(www.sysoft.net.cn) 发布时间:2019/3/17 9:34:51 CREATE TABLE 语句 CREATE TABLE 语句用于创建数据库中的表. SQL CRE ...