盒子模型

简介: 盒子模型

1.边框

image.png

2.边框粗细

thin:默认边框厚度1px

medium:默认边框厚度3px

thick:默认边框厚度5px

border-style

image.png

3.边框样式

dashed:虚线ditted:点状虚线none:无轮廓。当定义了该值时,border-color将被忽略,border-width计算值为0,除非边框轮廓应border-image。hidden:隐藏边框。dotted:点状轮廓。dashed:虚线轮廓。solid:实线轮廓double:双线轮廓。两条单线与其间隔的和等于指定的border-width值groove:3D凹槽轮廓。ridge:3D凸槽轮廓。inset:3D凹边轮廓。outset:3D凸边轮廓

image.png

4.border简写:同时设置边框的颜色、粗细和样式

image.png

5.外边距

image.png

6.外边距的妙用

image.png

7.内边距

image.png

8.盒子模型的尺寸

image.png

9.box-sizing

image.png

image.png

9.圆角边框

image.png

10. 使用border-radius制作特殊图形

圆形:

image.png

半圆形:

image.png

扇形:

image.png


相关文章
|
29天前
|
前端开发 开发者
css两种盒子模型
在CSS中,有两种盒子模型:标准盒子模型和IE盒子模型(怪异盒子模型)。标准盒子模型中,`width`和`height`仅指内容区的尺寸,总宽度和高度还包括内边距、边框和外边距。IE盒子模型中,`width`和`height`包括内容区、内边距和边框,总宽度和高度仅加外边距。通过`box-sizing`属性可以切换这两种模型,`box-sizing: content-box;`表示标准盒子模型,`box-sizing: border-box;`表示IE盒子模型。
|
2月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
33 0
|
10天前
|
前端开发
CSS 盒子模型
CSS 盒子模型
19 4
|
5月前
|
前端开发 JavaScript 开发者
详细解读CSS——盒子模型(含详解)
详细解读CSS——盒子模型(含详解)
25 0
|
6月前
|
前端开发 开发者
CSS盒模型
【5月更文挑战第24天】CSS盒模型
46 3
|
前端开发
CSS-实现文字描边效果
一、介绍 文字描边分为两种:内外双描边和单外描边,也就是指在给文字加上描边效果后,描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。
N..
|
6月前
|
前端开发
CSS盒子模型
CSS盒子模型
N..
33 0
|
6月前
|
前端开发 JavaScript 容器
CSS学习笔记(一) 盒子模型
CSS学习笔记(一) 盒子模型
|
6月前
|
前端开发
CSS【盒子模型】
CSS【盒子模型】
74 0
|
11月前
|
前端开发
css渐变实现杂色
css渐变实现杂色
45 1