边框

border:边框的意思,描述盒子的边框

边框有三个要素: 粗细 线性样式 颜色

border: solid

如果颜色不写,默认是黑色。如果粗细不写,不显示边框。如果只写线性样式,默认的有上下左右 3px的宽度,实体样式,并且黑色的边框。

按照3要素来写border

border-width: 3px;
border-style: solid;
border-color: red;
/*
border-width: 5px 10px;
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条语句,相当于 bordr: 10px solid red;

另外还可以这样:

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;

border:none;

border:0;

表示border没有设置样式。

使用border来制作小三角

/*小三角 箭头指向下方*/
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}

11-border(边框)的更多相关文章

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

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

  2. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  3. 【代码笔记】Web-CSS-CSS Border(边框)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

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

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

  6. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

  7. padding(内边距)、margin(外边距)、border(边框)

    元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 mar ...

  8. border边框的宽度/样式/颜色 全部值

    border 用emmet写border的时候, 缩写是:bd. 不是b, 也不是bdr: b会扩展成bottom, bdr 会扩展成 border-right, border的宽度: 1px 基本上 ...

  9. [CSS]border边框

    border: 1px solid #ccc;    /*1像素 实线 灰色*/可分割成:border-width:1px;border-style: solid; border-color: #00 ...

  10. border边框属性

    边框属性: 边框宽度(border-width):thin.medium.thick.长度值 边框颜色(border-color):颜色.transparent(透明) 边框样式(border-sty ...

随机推荐

  1. MyBatis高级映射查询(3)

    一.数据库数据和项目搭建过程 1.主要要四张表,分别为user用户信息表.items商品表.orderdetail订单明细表.orders订单表.表的结构和数据如下: 表结构 CREATE DATAB ...

  2. how2j学习日志——J2EE(2018年3月28日)

    1. 开始跟着站长学习J2EE,首页是简单的Tomcat安装和部署,我从官网上下载的是7.0.85版本,修改server.xml中的默认端口号为80.80端口是web服务的默认端口,因此在浏览器上输入 ...

  3. 国内淘宝镜像 cnpm转npm

    npm install -g cnpm --registry=http://registry.npm.taobao.org

  4. js继承的几种类型

    首先提供构造函数 1. 构造函数实现继承 原理:改变函数上下文实现继承(call,apply,return,bind) return {}/function(){}   如果返回值是对象 那么this ...

  5. list转map

    参考https://cloud.tencent.com/developer/article/1033706 import java.lang.reflect.Field; import java.ut ...

  6. linux 输出重定向

    输出重定向 标准输入 文件描述符:0 设备:键盘 设备文件名:/dev/stdin 标准输出 文件描述符:1 设备:显示器 设备文件名:/dev/sdtout 标准输出重定向 命令 >> ...

  7. session是什么

    初识session,跟大家一起学习下 session是什么 首先,我们需要知道session是什么.我们普遍将session称之为会话控制.说实在的,我现在也不清楚session到底算是什么.我个人认 ...

  8. Android.Study.Question

    1. NullPointerException 1.1 发生该异常的原因. 1.2 解决方法有哪几种? try-catch 2. Eclipse 中 debug/run 两个模式,run 是relea ...

  9. shell判断文件后缀名是否为特定字符串

    如果文件是 .css文件 或 .js文件,则进行处理. if [ "${file##*.}"x = "css"x ]||[ "${file##*.}& ...

  10. Real-time qPCR So Easy?

    Real-time qPCR So Easy? [2016-05-27]       实时荧光定量PCR技术是在定性RCR技术基础上发展起来的核酸定量技术,于1996年由美国Applied biosy ...