css边框

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。 HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margin的方式。如图： 代码演示： 如图这个盒子宽widht:500px,高height：200px,外边距padding：100px，边框border：5px, 外间距margin：100px;所以这个盒子的大小为710px*410px 因为盒子本身的大小是这样计算的： width: width + padding-left + padding-right + border-left + border-right height: height + padding-top + padding-bottom + border-top + border-bottom 通过盒模型我们更容易理解 标准盒模型： 何为padding内边距？ 1,、padding内边距是在盒子里面，在盒子与内容之间，控制子元素在父元素里面的位置关系。 2、padding会把盒子撑大，如果想让盒子保持原有的大小：在宽高基础上减掉。（ 如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉） 注意

浅谈盒子模型 对于刚进入前端开发学习来说，盒子模型应该是大多数人为之头痛的一个知识点。它是前端搭建结构必不可少的，所有的页面都会有它的身影。下面就谈谈我对盒子模型的认识。 首先我们来了解一下盒子模型构成： 1、内容（content） 2、边框（border） 3、外边距（margin） 4、内边距（padding） 接下来，我们来具体了解这几个构成: 一: 内容（content）： 内容区主要是盒子要显示的东西，比如文本，图片，视频等; 二: 边框（border） 边框是盒子的边界，它包裹着内容区和内边距。边框的宽度，颜色，边框类型都可以通过css属性来进行调节,属性为border：属性值1 属性值2 …;。 边框可以分别设置四个方向 属性分别为 : border-left（左） border-right（右） border-top（上） border-bottom（下） 三:内边距（padding） padding是存在于内容和边框之间的区域，它的作用就是让内容和边框产生距离（如下图） 加padding前（上图）后（下图）对比 padding的用法 padding： ； 和边框一样，padding也可以对四个方向分别进行设置 属性分别为 padding-left（左）padding-right（右）padding-top（上）padding-bottom（下）

border常见属性 值 描述 border-width 规定边框的宽度 border-style 规定边框的样式 border-color 规定边框的颜色 border-image 规定边框的图像 border-radius 规定边框的圆角 box-shadow 规定边框的阴影 1.border-width：规定边框宽度 .pag{ border-style:solid; border-width:10px; width:100px; height:30px; } 效果： 那我们来谈论一下border边框包括哪些范围 .pag1{ border-style:solid; border-color:rgb(255,0,255,0.3); border-width:20px; width:100px; height:100px; position:absolute; } .pag2{ background-color:blue; width:100px; height:100px; } </style> <div class="pag"> <div class="pag1"> <div class="pag2"> </div> </div> </div> 由此可见边框是向外围扩展的，也就是外边框 2.border-radius：规定边框的圆角 （1）通过百分比显示 css代码

文章目录 前言 正文 1.css的一些简单介绍 2.页面引入css 2.1 外部样式表 2.2 内部样式表 2.3 行内样式表 3.css选择器 3.1 元素选择器（标签选择器） 3.2 id选择器 3.3 类选择器(class选择器) 3.4 并集选择器 3.5 属性选择器 3.6 后代选择器 3.7 对上面的几种选择器归纳总结 4.常见的属性 4.1 字体属性 4.2 颜色和背景属性 4.3 文本属性 4.4 边框和编号属性 4.5 块元素和内联元素 4.6 浮动、块属性、层属性 总结 前言 昨天写了html的基础，今天趁热打铁再来学学css。不过可能今天的内容就有点多了，记得隔几天回头来复习一下加深印象（骗骗浏览数，嘻嘻嘻） 正文 玩笑归玩笑，不过今天的内容确实很多，现在开始正文。 1.css的一些简单介绍 css:指的是“Cascading Style Sheet（层叠样式表）”，是用来控制网页外观的一门技术。 作用：美化页面 之前说前端三剑客嘛，html，css，js。当然现在有很多很好的js框架出现（比如Angular、React、Vue），这方面框架的学习推荐去B站看技术胖的视频，我们今天只聊聊最基础的css，打好基础之后的学习才会更轻松。 2.页面引入css 三种方法 外部样式表 内部样式表 行内样式表 一般开发的话推荐外部样式表，我举例子的话会用内部样式表

如何实现下面这个渐变的边框效果： 这个问题本身不难，实现的方法也有一些，主要是有一些细节需要注意。 border-image border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值。 顾名思义，我们可以给 border 元素添加 image，类似于 background-image ，可以是图片也可以是渐变，不再局限于纯色。 使用 border-image 实现渐变边框 有了 border-image 之后，实现渐变边框变得很方便 不过多介绍 border-image 的语法，读者需要自行了解一下。 实现如下： <div class="border-image"></div> .border-image { width: 200px; height: 100px; border-radius: 10px; border-image-source: linear-gradient(45deg, gold, deeppink); border-image-slice: 1; border-image-repeat: stretch; } 上面关于 border-image 的三个属性可以简写为 border-image:

CSS盒模型及其应用 盒子模型（重点） 认识盒子模型组成 盒子边框（border） 边框综合写法 合并细线表格 圆角边框（CSS3） 盒子内边距（padding) 外边距以及盒子居中对齐 外边距实现盒子居中 清除内外边距 外边距合并 **相邻元素垂直外边距的合并** content宽度和高度 案例： 盒子模型的布局稳定性 CSS3盒模型 盒子阴影 盒子模型（重点） 认识盒子模型组成 通过一张图体会盒子模型 所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。 盒子边框（border） 边框通俗来说指的就是橘子皮，柚子皮。 语法： border : border-weight || border-style || border-color 边框属性—设置边框样式（border-style） 边框样式用于定义页面中边框的风格，常用属性值如下： none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线(最为常用的) dashed：边框为虚线 dotted：边框为点线 double：边框为双实线 边框综合写法 设置内容 样式属性 常用属性值 上边框 border-top-style:样式; border-top-width

CSS,是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS具有以下特点： 1、丰富的样式定义 CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。 2、易于使用和修改 CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的 CSS文件 中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。 3、多页面应用 CSS样式表可以单独存放在一个 CSS文件 中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。 4、层叠 层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。 5、页面压缩 在使用HTML定义页面效果的网站中

在网页的制作过程中，经常会遇到需要给元素添加边框的情况，比如在ul中，如图所示 此时假如要给其中的五个li元素都加上侧边框，按照原来的方法，可以看到确实有失美观 可以设想，假如此时让边框变得短一点，应该效果会好一些，因此便可以借助css提供的before和after伪元素来实现 before和after伪元素相关内容可以参考MDN文档 before after 实现代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> ul{ width: 600px; height: 50px; background-color: #292929; position: absolute; left: 50px; top: 50px; } ul, li{ margin: 0; padding: 0; font-size: 14px; } li{ position: relative; width: 100px; height: 50px; line-height: 50px; display: inline-block; color: #FFFFFF; text-align: center; } li:before { content: ""; position: absolute;

盒子模型（Box Model） 标准盒子模型 盒子边框（border） border-width border-style border-color 边框的样式： none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线(最为常用的) dashed：边框为虚线 dotted：边框为点线 内边距（padding） padding不影响盒子大小情况 如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框 外边距（margin） 块级盒子水平居中 盒子必须指定了宽度（width） 然后就给 左右的外边距都设置为auto ， 外边距合并 相邻块元素垂直外边距的合并 * 相邻块元素垂直外边距的合并、 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和 取两个值中的较大者 这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。 解决方案：尽量给只给一个盒子添加margin值 。 嵌套块元素垂直外边距的合并（塌陷） 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框 父元素的上外边距会与子元素的上外边距发生合并

实现原理 先画一个半圆，利用伪类把半圆放在border上 代码 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http - equiv = "X-UA-Compatible" content = "ie=edge" > < title > Document < / title > < style > html , body { width : 100 % ; height : 100 % ; } . father { width : 400 px ; height : 200 px ; } . bule { width : 100 % ; height : 50 % ; background : blue ; border - radius : 10 px 10 px 0 0 ; } . white { width : calc ( 100 % - 2 px ) ; height : 50 % ; background : #fff ; border : 1 px solid red ; border - top