css-4.边框和盒子模型

CSS边框与盒模型详解

最新推荐文章于 2023-03-16 15:09:48 发布

原创最新推荐文章于 2023-03-16 15:09:48 发布 · 349 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了CSS中边框的各种属性，包括实线、虚线边框、边框圆角、边框阴影及边框图片设定。此外还讲解了如何通过border-image属性将图片作为边框，以及如何使用outline去除浏览器默认选中状态的蓝色边框。最后，本文探讨了CSS盒模型的基础知识，包括margin和padding的应用技巧。

边框

border: 1px solid black;
border-right: 1px solid red;
border-top: 1px dashed green;
border-top: 1px dashed green;

/*隐藏边框*/
border-bottom: 0px;
border-right: none; /*效率最高，就是没有*/
border: transparent;

边框倒脚

·顺时针
border-radius: 150px;
border-radius: 150px,20px,0px;

边框阴影

box-shadow: 5px 5px 5px #0000FF inset;
/*inset 内阴影*/
box-shadow: 0px 0px 5px 1px red;
/*
h-shadow v-shadow blur模糊阴影 spread扩展（阴影） color颜色
*/

边框轮廓

(1)边框：
·border-immage 属性：将图片规定为包围div元素的边框
-border-image:source width repeat;
-也可以分别设置
border-image-source:图片的路径
border-image-width：图片边框的宽度
border-image-repeat：图片边框是否应平铺（repeat）铺满（round）或拉伸（stretch）
eg：
#d1{
border-image: url(img/head2.png) 26 stretch;
/*
* round 环绕
* repeat 重复
* stretch 拉伸
*将图片九宫格切片，26是一个切片的宽度
*/
}
(2)轮廓
·位于border外的一圈类似描边的样式
#d1{
outline: 2px solid red;}

· 去掉chrome默认表单元的蓝边
#d1{outline ：none}

框模型(盒子模型)

·定义元素框处理元素的内容、内边距、边框和外边距的方式
外边距:margin
·默认情况下，以下html块级元素都存在外边距
-body
-h1,h2,h3··h6
-p ···
声明margin属性，可以覆盖默认样式
body，h1，p {
margin:0;
}
eg:
#d1 {
border-color: red;
margin: 10px 20px; /*行内元素只有左右margin生效，上下不生效，要放到块元素*/
margin-bottom : 20px;
}
#d2 {
border-color: green;
margin: 20px auto;
/*左右margin auto 居中

*/
margin-top : 30px; /*这个比上面的margin-bottom大，所以上下距离30px*/
}
/*当上下margin相遇时，较大的值生效，而不是叠加*/

内边距：padding
会将元素撑大，实际宽度是大小加上左右padding大小
eg:
#d1 {
border-color: red;
padding: 10px ;
}