<!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. Nuxt+Vuex初体验

    小呀嘛小二郎,背着书包上学堂... 今天一个困扰了我一周时间的问题终于被我解决了,值得庆祝 在Nuxt中使用Vuex实现数据存储 首先: 在store目录下新建一个index.js文件 需要有两个组件 ...

  2. SpringCloud Zuul2.X网关实现服务熔断降级(复制即用）

    版本: <properties> <spring-boot.version>.RELEASE</spring-boot.version> <spring-cl ...

  3. MySQL 是如何处理死锁的

    MySQL(InnoDB)是如何处理死锁的 一.什么是死锁 官方定义如下:两个事务都持有对方需要的锁,并且在等待对方释放,并且双方都不会释放自己的锁. 这个就好比你有一个人质,对方有一个人质,你们俩去 ...

  4. asp.net允许跨域配置web.config

    <configuration> <system.webServer> <modules> <add name="CultureAwareHttpMo ...

  5. 字段明明存在，用Web API使用该字段进行查询报错？

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  6. Android 使用 aapt 命令查看 apk 包名

    一.aapt 是什么 aapt 即Android Asset Packaging Tool,在SDK的build-tools目录下.该工具可以查看,创建, 更新ZIP格式的文档附件(zip, jar, ...

  7. 苹果_公司开发者账号_申请DUNS number

    申请DUNS number 注意事项:a.公司英文名称,例如:北京京城科技有限公司,Beijing Jingcheng Technology Co., Ltd.(Co.和Ltd.都是缩写,中间用“逗号 ...

  8. 如何快速找到多个字典中的公共键(key)

    from random import randint, sample #sample随机取样 d1 = {k: randint(1, 4) for k in sample('abcdefgh', ra ...

  9. 工具-Xmind常用快捷键/使用

    1-快捷键 Ctrl+Shift+L 快捷键助手 Ctrl+Home 返回中心主题 Ctrl+] 插入摘要 Ctrl+I 插入图片 Ctrl+Shift+H 插入超链接 Ctrl+1,2,3,4,5, ...

  10. Linux系统学习 十八、VSFTP服务—虚拟用户访问—配置虚拟用户访问

    配置虚拟用户访问 首先至少要关闭userlist 改完配置文件是要重启服务来使它生效 其实在刚装好vsftp的时候的配置文件不用修改的情况下配置虚拟用户访问控制是最好的 local_root选项不影响 ...