07-border(边框)
边框
边框有三个要素: 粗细、线性样式、颜色
border: solid
- 如果颜色不写,默认是黑色。
- 如果粗细不写,不显示边框。
- 如果只写线性样式,默认的有上下左右 3px的宽度,实体样式,并且黑色的边框。
按照3要素来写border
- border-width: 3px;
- border-style: solid;
- border-color: red;
线的样式有实线、点线、双线、虚线
- border-style: solid dotted double dashed;
- 表示
- 上边框是实线
- 右边框是点线
- 下边框是双线
- 左边框是虚线
按照方向划分
- 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;
- }
07-border(边框)的更多相关文章
- iPhone 6/plus iOS Safari fieldset border 边框消失
问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失. 示例代码: <div> <fieldset style="border: 1px ...
- css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
- 【代码笔记】Web-CSS-CSS Border(边框)
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法
盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...
- CSS border边框属性教程(color style)
CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...
- CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充
盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...
- padding(内边距)、margin(外边距)、border(边框)
元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 mar ...
- border边框的宽度/样式/颜色 全部值
border 用emmet写border的时候, 缩写是:bd. 不是b, 也不是bdr: b会扩展成bottom, bdr 会扩展成 border-right, border的宽度: 1px 基本上 ...
- [CSS]border边框
border: 1px solid #ccc; /*1像素 实线 灰色*/可分割成:border-width:1px;border-style: solid; border-color: #00 ...
- border边框属性
边框属性: 边框宽度(border-width):thin.medium.thick.长度值 边框颜色(border-color):颜色.transparent(透明) 边框样式(border-sty ...
随机推荐
- uoj #49. 【UR #3】铀仓库
http://uoj.ac/problem/49 这题二分答案可以做,同时存在另一个直接二分的解法. 考虑对每个点,二分能向左右延伸的最大半径,由于权值范围较大,不能O(1)查询向一侧走指定距离后到达 ...
- 用ADB打开MUMU模拟器的WLAN用于设置代理IP
adb connect 127.0.0.1:7555 adb shell am start -a android.intent.action.MAIN -n com.android.settings/ ...
- BloomFilter理解
知道BloomFilter是因为RocksDB数据库中用到了这个技术,用于判断1个数据是否存在于1个SST文件中. BloomFilter可能存在误判,就是判断数据是存在集合中,而实际上可能不存在,概 ...
- CountDownLatch的简单讲解
正如每个Java文档所描述的那样,CountDownLatch是一个同步工具类,它允许一个或多个线程一直等待,直到其他线程的操作执行完后再执行.在Java并发中,countdownlatch的概念是一 ...
- Win10开发环境配置
基本环境变量配置:最近工作电脑固态硬盘损坏了,导致不得不重新装机,从前配置的环境需要重新配置,在此标记. Java环境配置: 添加变量 JAVA_HOME=D:\Program Files\Java\ ...
- CRM N:1 关系或者字段无法删除
点开详细信息查看那些实体引用了该组件.查看内容如下: 1 查看窗体上有无该字段; 2 查看视图中有无该字段; 3 查看试图的 筛选条件; 4 查看试图的 查找列; 5 发布之后再试试.
- Hadoop 2.x常用端口及查看方法
Hadoop集群的各部分一般都会使用到多个端口,有些是daemon之间进行交互之用,有些是用于RPC访问以及HTTP访问.而随着Hadoop周边组件的增多,完全记不住哪个端口对应哪个应用,特收集记录如 ...
- delphi正则表达式学习笔记(三)
Delphi 中经常使用的正则表达式 在 Delphi 中使用正则表达式, 目前 PerlRegEx 应该是首选, 准备彻底而细致地研究它. 官方网站: http://www.regular-e x ...
- Android Studio将项目打包成apk
Android Studio将项目打包成apk 第一种方法:适合自己调试用. (1)直接在项目中生成: (2)位置是在你的项目中 第二种方法:适合发布应用. (1)找到Generate Signed ...
- java对redis的基本操作(初识)
一.server端安装 1.下载 https://github.com/MSOpenTech/redis 可看到当前可下载版本:redis2.6