标签（空格分隔）： border

border的认识：

border:边框的意思，描述盒子的边框，边框有三个要素： 粗细， 线性样式 ，颜色；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>padding</title>

    <style type="text/css">

        .box{

            width:200px;

            height: 200px;

            border: 5px solid red;

        }

    </style>

</head>

<body>

    <div class="box">

    </div>

</body>

</html>

2、如果颜色不写，默认是黑色的：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>padding</title>

    <style type="text/css">

        .box{

            width:200px;

            height: 200px;

            border: 5px ;

        }

    </style>

</head>

<body>

    <div class="box">

    </div>

</body>

</html>

如图：

如果只保留solid呢？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>padding</title>

    <style type="text/css">

        .box{

            width:200px;

            height: 200px;

            border: solid;

        }

    </style>

</head>

<body>

    <div class="box">

    </div>

</body>

</html>

结果如图：

  • 如果颜色不写默认识黑色；

    如果粗细不写不显示，只写线性样式：默认有上下左右3px的宽度，solid默认的黑色；

按照3要素属性来写border：

border-width: 3px;

border-style: solid;

border-color: red;

/*

border-width: 5px 10px;这个padding的写法一样的，；

border-style: solid dotted double dashed;这个也是上右下左；

border-color: red green yellow;

*/

按照方向：

border-top-width: 10px;

border-top-color: red;

border-top-style: solid;

border-right-width: 10px;

border-right-color: red;

border-right-style: solid;

border-bottom-width: 10px;

border-bottom-color: red;

border-bottom-style: solid;

border-left-width: 10px;

border-left-color: red;

border-left-style:solid;

上面12条语句，相当于 border: 10px solid red;

另外还可以这样：

border-top: 10px solid red;

border-right: 10px solid red;

border-bottom: 10px solid red;

border-left: 10px solid red;

清除边框的默认样式，比如input输入框

 border:none;

 border:0;

使用border来制作小三角

/*小三角 箭头指向下方*/

        div{

            width: 0;

            height: 0;

            border-bottom: 20px solid red;

            border-left: 20px solid transparent;

            border-right: 20px solid transparent;

        }

认识border的更多相关文章

  1. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  2. css样式之border

    border用法详解: 1.border-width 属性设置边框的宽度 可能的值:像素 2.border-style 属性设置边框的样式 可能的值:solid(直线),dashed(虚线),dott ...

  3. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  4. css3学习--border

    http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...

  5. border：none 和border：0区别差异

    border:none与border:0的区别体现为两点:一是理论上的性能差异,二是浏览器兼容性的差异. 性能差异: [border:0;]把border设为“0”像素效果等于border-width ...

  6. WPF 通过Border来画边框

    WPF有自己的表格控件DataGrid.ListBox等,如果只是简单的需求,可以通过Border控件来画边框. 比如我们需要给上面的控件加上边框. <Window x:Class=" ...

  7. css border属性做小三角标

    <!doctype html><html> <head> <title></title> <meta charset="ut ...

  8. 使用border做三角形

    网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...

  9. iPhone 6/plus iOS Safari fieldset border 边框消失

    问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失. 示例代码: <div> <fieldset style="border: 1px ...

  10. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...

随机推荐

  1. php 学习资料

    http://blog.csdn.net/woshihaiyong168/article/details/52846205  --队列基本原理的认识

  2. 17款提高编码效率的CSS工具

    摘要:作为WEB前端开发人员,你的工作可能很大一部分都在编写CSS代码,为了提高前端开发人员编写CSS代码的效率,编程文库从 网上搜集了17款可以提高你CSS代码效率的CSS工具,它们可以帮助你快速生 ...

  3. Centos 6.9 install Python3.7

    # install python3sudo yum -y updatesudo yum -y install yum-utils yum install -y zlib-devel bzip2-dev ...

  4. Scrapy实战篇（九）之爬取链家网天津租房数据

    以后有可能会在天津租房子,所以想将链家网上面天津的租房数据抓下来,以供分析使用. 思路: 1.以初始链接https://tj.lianjia.com/zufang/rt200600000001/?sh ...

  5. python之路——20

    学习内容 1.序列化——数据类型转向字符串数据类型 反序列化——字符串转向数据类型2.序列化模块 json模块 通用序列化格式 弊端:只有少部分数据类型可通过json转化 pickle模块 所有的py ...

  6. Linux(CentOS)用户修改密码有效期（chage命令）

    Linux设置用户密码的有效期限 解决: 先查看密码过期时间,现在是90天 1 2 3 4 5 6 7 8 [root@01 ~]# chage -l testuser Last password c ...

  7. Windows和MacOS的比较——不断完善和补充，欢迎吐槽

    1. 鼠标滚轮的方向不一样,Windows上滚轮朝下,页面滚动条也会朝下.而Mac上则相反. 2. Windows上有Home和End键,经常可以Ctrl+Home,Ctrl+End,Ctrl+Shi ...

  8. 线上CPU100%排查

    生产服务器上部署了几个java程序,突然出现了CPU100%的异常告警,你如何定位出问题? 这个问题分为两版回答!高调版对不起,我是做研发的,这个问题在生产上是不可能遇见的!因为研发是不可能直接操作生 ...

  9. 另类P、V操作问题-详细图解

    问题模型 有一个系统,定义如下P.V操作: P(s): s.count--; then 将本进程插入相应队列末尾等待; V(s): s.count++; then 从相应等待队列队尾唤醒一个进程,将其 ...

  10. jQuery validdate插件的使用

    跟着书上的例子做的时候发现很奇怪,在script标签中用message重写提示消息,没有反应,不知道是不是引入的metadata.js文件有问题,于是用了菜鸟教程的cdn和教程,魔改了一下 <! ...