<!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. Unity Ruby's Adventure 第一步

    官方游戏教程:https://learn.unity.com/project/ruby-s-2d-rpg?language=en 鲁比大冒险是一个2D游戏入门教程,涉及动画,特效,UI,瓦片地图,音效 ...

  2. 看懂 游戏《Minecraft》的崩溃报告 服务端/客户端

    如何看懂Minecraft报错的关键信息. 让你如何看懂Minecraft报错 前言 一些俏皮话 寻找崩溃日志 打开崩溃日志 重要的事说三遍 下载文本编辑器 开始分析 深度分析 得出结论 修复报错 解 ...

  3. 面试连环炮系列（二）：你们的项目Redis做了集群部署吗

    你们的项目Redis做了集群部署吗? 我们有大量数据需要缓存,而单实例的容量毕竟是有限的,于是做了Redis集群部署. 采取的方案是什么,Codis还是Redis Cluster,为什么要选择这个方案 ...

  4. Python 学习笔记（基础篇）

    背景:今年开始搞 Data science ,学了 python 小半年,但一直没时间整理整理.这篇文章很基础,就是根据廖雪峰的 python 教程 整理了一下基础知识,再加上自己的一些拓展,方便自己 ...

  5. JavaWeb入门——在Windows环境下安装Tomcat服务器

    JavaWeb入门——在Windows环境下安装Tomcat服务器 摘要:本文主要学习如何在Windows环境中下载并安装Tomcat服务器. 下载 获取安装包 推荐去官网上下载Tomcat: htt ...

  6. Flutter安装入门教程

    ### 前言 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和 ...

  7. Android 弹出Dialog时隐藏状态栏和底部导航栏

    上代码 dialog.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION); di ...

  8. svn忽略文件不提交至服务器的方法

    在提交界面,右键加入忽略提交列表.可以实现忽略本地文件不提交,且不删除服务器上的文件.

  9. win10，7 80端口被占用的检测和解决方法

    这是一篇关于检测windows7和windows10系统“80端口”被哪个程序占用和怎么解决的小教程.此处用windows10作为范例 1.得到占用该端口的PID ①打开运行(快捷键win+R)(也可 ...

  10. openpyxl基本操作

    参考资料:OpenPyXL的使用教程(一) openpyxl 基本操作 # 创建xml from openpyxl import Workbook # 创建工作簿 wb = Workbook() # ...