<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>边框属性</title>

<style>

/*.box{

height: 100px;

width: 100px;

background-color: #3385ff;

border-top:1px double #000;

border-right:2px dashed red;

border-bottom:3px outset white;

border-left: 4px solid #000;

}*/

.box{

height: 0px;

width: 0px;

border-width:25px;

border-style:solid;

border-color: red green blue purple;

}

.box{

height: 0px;

width: 0px;

border-width:25px;

border-style:solid;

border-color: red white white;

border-bottom:none;

}

</style>

</head>

<body>

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

</body>

</html>

效果图如下：

在盒子模型中我们通常会给盒子设置边框属性，使之完成某些功能和样式
我们会使用css中的border属性来设置边框
一般会通过连写来设置border，他下面还有width,style,color的属性，
在开发中，我们会使用连写。
写法1：（按照方向）
快捷键：bd+
border: 1px solid #000; 这样的属性设置，四个边框属性值是相同
当然我们也可以分别设置四个边框的属性：
快捷键：bdt+
border-top: 1px solid #000;
快捷键：bdr+
border-right: 2px solid #000;
快捷键：bdb+
border-bottom: 3px solid #000;
快捷键：
border-left: 4px solid #000;
其中的属性分别是：width,style,color.
写法2：（按照属性）
border-width:1px 2px 3px 4px;
border-style:none dashed double dotted;
border-color:red green white black;
注意点：1.这四个属性按照上右下左来赋值，顺序不能错。
2.这四个属性值是可以省略的，例如，当你只写上右下的时候，没写左边
这时，左边的属性会按照右边的属性，当你没设置下和右的时候，下会和上
一样，左会和上一样。当你只写了第一个，那么这四条边框会都会按照第一个
来取值。
写法3：（单独设置）
还可以单独设置每条边框单独的属性值，例如：
border-right-width:3px;
border-left-style:double;
border-bottom-color:red;
border-style有很多取值：

CSS .css边框属性（border）的更多相关文章

  1. CSS之边框属性

    border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式. border-style:dotted solid double dashed; border-style的属 ...

  2. CSS的背景属性和边框属性

    CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...

  3. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  4. css3设置边框属性

    css设置边框属性:设置边框圆角 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  5. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  6. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  7. div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出

    今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...

  8. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  9. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

随机推荐

  1. CSDN屏蔽广告

    CSDN俨然是一家广告网站了,各种广告层出不穷,且毫无底线.经常性的展示一些植发.防脱的广告,实在影响心情.另外,在复制内容的时候,会通过js给你带上一段来源,对于版权保护这是好事儿,但是对于直接复制 ...

  2. Git常用进阶操作之一

    提起Git,经常做项目的我们都不陌生,我们常用的功能有哪些呢? 这里按个人使用情况简单总结一下. 像新建远程仓库.新建分支这些就不说了,不熟的同学可以翻看我前面写的git基本操作. 1.首先提一下为每 ...

  3. Jmeter性能测试分布式技术

    一.什么是分布式测试 分布式测试是指通过局域网和Internet,把分布于不同地点.独立完成特定功能的测试计算机连接起来,以达到测试资源共享.分散操作.集中管理.协同工作.负载均衡.测试过程监控等目的 ...

  4. git clone 仓库的部分代码

    对于较大的代码仓库来说,如果只是想查看和学习其中部分源代码,选择性地下载部分路径中的代码就显得很实用了,这样可以节省大量等待时间. 比如像 Chromium 这种,仓库大小好几 G 的. clone ...

  5. default(T);

    在泛型类型中,由于泛型类型即可以是引用类型也可以是值类型,所以不能用null来表示默认值.这里通过default来进行.引用类型的default将泛型类型初始化null,值类型的default将泛型类 ...

  6. Odoo，快速上手Odoo，来了解Odoo几个标准模块

    odoo通过Apps和Connector扩展和集成数以万计的应用和服务,odoo目前有超过12500个Apps可选用.它囊括了项目管理,生产.财务.记账和销售管理,仓储管理,人力资源管理,等等项目.本 ...

  7. java读取文本文件内容2

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/183 很久之前写了一篇Java读取文本文件内容,链接地址是 ...

  8. [20191125]oracel SQL parsing function qcplgte 2.txt

    [20191125]oracel SQL parsing function qcplgte 2.txt --//参考前面的测试:http://blog.itpub.net/267265/viewspa ...

  9. JSON字符串转Map的几种方法

    String json = "{"status":0,"result":{"location":{"lng": ...

  10. 2019/12/12学习内容摘要（Linux系统用户与用户组管理②）

    5.命令 chfn 用于修改用户的finger (finger为 /etc/passwd 文件第五个字段中显示的信息) 三,用户密码管理 1.命令passwd  格式 passwd [username ...