<!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. Nginx安装与运行

    目录 Nginx安装与运行 安装Nginx 运行 注意事项 Nginx安装与运行 安装Nginx 在Nginx官网下载对应的nginx包(推荐使用稳定版[Stable version]) 上传ngin ...

  2. vue中实现百度地图

    1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...

  3. .NET Core 发布(dotnet publish)

    目录 一.需求 二.方法 三.参考 一.需求 使用.net core 3.0建的项目,一般情况下,每次想发布都要打开vs,然后点击发布,选择配置: 如果想用cmd命令行发布,应该怎么写呢? 二.方法 ...

  4. Spring Security OAuth2 开发指南（非最新版本）

    请注意哈,本文翻译的时候,官网的的版本和本文翻译的时候是一一对应的. 但是官网已经更新文档和概念了,因此和本文翻译的就不在是同一个范围了. 因此我已经将标题修改为(非最新版本),各位老铁直接看官网就可 ...

  5. 一起学SpringMVC之异常处理

    在系统开发过程中,异常处理是不可避免,如果异常处理不好,会给用户造成很差的体验,本文主要讲解在SpringMVC开发过程中,异常处理的相关知识点,仅供学习分享使用,如有不足之处,还请指正. 概述 在S ...

  6. 针对windows系统如何解决openssl_pkey_export(): cannot get key from parameter 1这个问题

    为了解决这个问题我百度了很多方法,可是很多方法并没有效果. 方法一: 如果你安装的是phpstudy这个集成环境,那么 1.你就要去php拓展里面去打开php_opemssl中打开这个扩展. 2.去p ...

  7. pandas 初识(六）-可视化

    Pandas 在一张图中绘制多条线 import pandas as pd import numpy as npimport matplotlib.pyplot as plt df = pd.Data ...

  8. Android-再次解读萤石云视频

    ### 前言 我之前写过一篇萤石云的集成文章,很多人问我有没有demo, 今天我再次总结一下, 并加个些功能. - 集成步骤 - 视频预览播放 - 视频放大缩小 - 视频的质量切换 - 截图 - 视频 ...

  9. synchronized凭什么锁得住？

    相关链接: <synchronized锁住的是谁?> 我们知道synchronized是重量级锁,我们知道synchronized锁住的是一个对象上的Monitor对象,我们也知道sync ...

  10. [洛谷P1037][题解]产生数

    这道题的关键是利用Floyd算法的性质求转换方案,算是Floyd的一个变形,具体可以看代码. 题目 #include<bits/stdc++.h> using namespace std; ...