css盒子模型之边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width:300px;
height: 390px;
background-color:pink;
border-top-style:solid;/* 线型 */
border-top-color:red;/* 上边框颜色 */
border-top-width:5px;/* 上边框粗细 */ border-bottom-style:dotted;/* 点线 */
border-bottom-color:blue;
border-left-style:dashed;/* 虚线 */
border-left-color:#467890;
/* 四个边框都一样 */
border:5px solid blue;
}
</style>
</head>
<body>
<div class="box">距离</div>
</body>
</html>
css盒子模型:
1.边框 border
border-top-style(线型):solid(实线)
dotted(点线)
dashed(虚线)
border-top-color(边框颜色)
border-top-width(边框粗细)
2.边框属性简写:
border-top:5px solid red;
特点:没有顺序限制.线型为必写项
四个边框相同的时候写法:
border:5px solid red
特点:没有顺序要求。线型为必写项
css盒子模型之边框的更多相关文章
- CSS -- 盒子模型之边框、内边距、外边距
一.使用border为盒子添加边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有: dashed( ...
- css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
- css盒子模型之边框宽度,边框颜色与边框样式
/* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- CSS盒子模型的理解
标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...
- 每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
- CSS 盒子模型概述
一.简介 CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成. 盒子模型,最里面的部分是实际内容:直接包围内 ...
- 理解CSS盒子模型
概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...
随机推荐
- mariadb 10.1.26 二进制包安装笔记
报错链接:http://php.upupw.net/ank2discuss/40/6841-e.html mariadb 10.1.26 二进制版本 全名称: mariadb-10.1.26-linu ...
- 解决Django-1.8.2应用部署到Apache后无法显示admin应用的CSS
在将Django-1.8.2应用部署到Apache后,无法显示admin应用的静态内容,而在“manage.py runserver”命令下可以正常显示,主要是Apache没有找到Django静态内容 ...
- Mac zsh切换bash bash切换zsh
切换bash ————>>>chsh -s /bin/bash 切换zsh ------->>>chsh -s /bin/zsh
- 【Window 7】解决Win7远程桌面无法全屏的方法
在Windows中有一项远程桌面功能,可以登录到其他电脑上进行远程控制,就像操纵本机一样,非常方便.但是最近发现用远程桌面登录过去时并不是全屏模式,而是窗口模式,老要拉滚动条,实在很不方便,今天还是到 ...
- linux 环境变量字符串的优先顺序
/data/miniconda3dir/envs/mtfy/bin:$PATH 和$PATH:/data/miniconda3dir/envs/mtfy/bin 区别是非常大. 在linux中不同环境 ...
- Invoke和BeginInvoke理解
在Invoke或者BeginInvoke的使用中无一例外地使用了委托Delegate,至于委托的本质请参考我的另一随笔:对.net事件的看法. 一.为什么Control类提供了Invoke和Begin ...
- springboot集成rabbitmq的一些坑
一.默认管理页面地址是 http://127.0.0.1:15672 但是spring配置连接里面要把端口改成5672,如果不配置的话默认就是端口5672 spring.rabbitmq.host=1 ...
- 智能文件选择列表—— bat 批处理
智能文件选择列表 *.wim @echo off setlocal enabledelayedexpansion title 智能文件选择列表 pushd %~dp0 & cd /d %~dp ...
- IBM flex system P260
CMM 机箱管理模块 提供如下功能: 电力控制 风扇管理 机箱和计算节点初始化 交换机管理 诊断:机箱.IO选项和计算节点 资源发现和库存管理 资源告警和监控 机箱和计算节点的电源管理 安全策略管理 ...
- 一块移动硬盘怎样兼容Mac和Windows系统,并且可以在time machine上使用
Mac的内存通常不是很大,加上使用Mac的time machine备份的话,是需要外置U盘或硬盘的.U盘存储空间较小,大家也不会去分区,直接拿来用在Mac上或者Windows上就可以了.所以这里只说硬 ...