29.html-盒子边框、阴影、外边距合并

边框：
border-width：用于指定边框的粗细。
border-style：用于定义边框的样式。
border-color：用于设置边框的颜色。
/* border：边框宽度样式颜色四个方向都是一样的 */
/* border：2px solid red； */
/* soild：实线
dotted：点线
dashed：虚线
double：双实线 */
/* 总体设置 */
border-top: 5px solid red;
border-left: 10px dotted blue;
border-bottom: 10px dashed green;
border-right: 15px double yellow;
/* 分开设置 */
border-top-width: 20px;
border-top-color: blueviolet;
border-top-style: solid;
/* 宽度综合：上右下左 */
border-width: 15px 5px;
/* 样式综合 */
border-style: double;
/* 颜色综合 */
border-color: chartreuse;
/* 最终综合 */
border: 15px dashed burlywood;

圆角边框：
/* 宽度*50% 高度*50% 横向纵向的一共圆角设置 */
border-radius: 5%;
/* 左上角 */
border-top-left-radius: 100px;
/* 左上右上右下左下的顺序如果没有就从对角取值 */

盒子阴影：
box-shadow:
水平阴影位置(h-shadow) 必须增大向右
垂直阴影位置(v-shadow) 必须增大向下
阴影模糊距离(blur) 可选值越高越模糊
阴影尺寸(spread) 可选向外延展的尺寸
阴影颜色(color) 可选
外部or内部(inset) 可选

外边距盒子水平居中：/* 盒子在父盒子水平居中上下0px 左右auto */

外边距合并：
同层级：
/* 同层级的合并上下采用较大值而不是两者加起来 */
/* 要求不要既用上盒子的下边距又用下盒子的上边距 */
嵌套：
/* 父子外边距合并父子外边距传递只有子盒子的margin-top才会传递给父盒子 */

29.html-盒子边框、阴影、外边距合并相关推荐

2021-04-05 web前端CSS之权重，盒子边框内外边距
视频学习:黑马程序员pink老师笔记:层叠性相同选择器给设置相同的样式--如果样式冲突,就近原则样式不冲突,不会层叠 <!DOCTYPE html> <html lang=&q ...
css盒子外边距合并问题
1.嵌套元素外边距合并问题需要制作一个图片在盒子内居中显示的效果,刚开始代码如下: 当内外层盒子都有margin值时,会执行较大值的margin,如下图,审查元素时发现,外层盒子margin-top ...
CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式实例 CSS 边框宽度实例特定边的宽度实例 CSS 边框颜色实例特定边框的颜色实例 HEX 值实例 RGB 值实例 HSL 值实 ...
前端：CSS/13/HTML引入CSS的方法，CSS表格属性，盒子模型，上下外边距合并
HTML引入CSS的方法 1,嵌入式通过<style>标记,来引入CSS样式: 语法格式:<style type="text/css"></styl ...
（盒子模型常见问题）外边距合并问题，嵌套盒子边距塌陷问题解决
1.兄弟盒子边距合并. <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
CSS3day(CSS三大特性，行高的继承，选择器的权重，盒子模型：外边距，边框，内边距)
文章目录 CSS三大特性:层叠性.继承性.优先级层叠性继承性行高的继承优先级优先级权重的叠加盒子模型: 边框(border) 表格的细线边框边框会影响盒子的实际大小内边距(paddin ...
CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型
盒子模型(Box Model): 指把HTML页面中的元素看作是一个矩形的盒子,也称容器,这个盒子从内到外由:元素的内容(content).内边距(padding).边框(border).外边距(ma ...
【温故知新】CSS学习笔记（外边距合并）
CSS外边距合并外边距合并使用margin定义块元素的垂直外边距时,可能会出现外边距的合并. 一.相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇的时候,如果上面的元素有下外边距margin ...
CSS基础(part12)--盒子模型之外边距
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型外边距属性设置块级盒子水平居中文字居中以及盒子居中插入图片和背景图片的区别清除元素的默认内外边距外边距合并(只存在垂 ...

29.html-盒子边框、阴影、外边距合并

29.html-盒子边框、阴影、外边距合并相关推荐

最新文章

热门文章