CSS中盒⼦样式的⼏种设置
css背景颜⾊设置：可以将盒⼦背景设置⼀定的颜⾊。如：
<style>
.box {
width: 300px;
height: 300px;
background-color: red;
}
</style>
背景图⽚设置：需要使⽤ background-image 属性来设置，⽽图⽚的路径需要写在 “url()”的括号内，如果背景图⽚并没有所设容器⼤，将会把背景图平铺后再显⽰，如需设置其平铺效果，则有以下四种：
<-repeat：不平铺
使⽤ background-position 属性来指定背景图所在位置：
1.left top：左上⾓（默认值）
2.right top：右上⾓
3.left bottom：左下⾓
4.right bottom：右下⾓
5.left center：左中间
6.right center：右中间
< center：正中⼼
边框属性设置：指定边框可以使⽤ border-left/top/right/bottom-color来设置颜⾊
border-left/top/right/bottom-style来设置样式
border-left/top/right/bottom-width来设置宽度
它的语法格式为:
border：线的宽度 线的样式 线的颜⾊
盒⼦模型：
盒⼦的内边距设置：容器中的内容和容器的边线之间的距离就是内边距，内边距的制定时使⽤ padding 属性来设置的。
1.左边使⽤ padding-left
2.上边使⽤ padding-top
3.右边使⽤ padding-right
4.下边使⽤ padding-bottom
根据设置值的不同，所表⽰的边也不同，如：
a.如果设置四个值，则表⽰：上，左，下，右
b.如果设置三个值，则表⽰：上，左右，下
c.如果设置⼆个值，则表⽰：上下，左右
d.如果设置⼀个值，则表⽰：上右下左的值都是⼀样的
盒⼦的外边距设置：容器与另⼀个容器之间的距离就叫外边距，外边距使⽤ margin 属性来指定。它的使⽤和语法格式与 padding 相同。
1.margin-left
2.margin-top
3.margin-right
4.margin-bottom
根据设置值的不同，所表⽰的边也不同，如：
a.如果设置四个值，则表⽰：上，左，下，右
b.如果设置三个值，则表⽰：上，左右，下
c.如果设置⼆个值，则表⽰：上下，左右
d.如果设置⼀个值，则表⽰：上右下左的值都是⼀样的
浮动：默认情况下，li中的内容是竖着显⽰的，如果想要横着显⽰，那么需要浮动浮动是使⽤ float 属性来定义，它有两个值:
box shadow怎么设置1.left：左浮动
2.right：右浮动
阴影：定义阴影效果的使⽤ box-shadow 属性，它的语法格式为:
box-shadow: h-shadow v-shadow blur spread color position;
1.h-shadow：必需，⽔平阴影的位置。允许负值。
2.v-shadow：必需，垂直阴影的位置。允许负值。
3.blur：可选，模糊距离。
4.spread：可选，阴影的尺⼨。
6.position：可选，将外部阴影（outset）改为内部阴影。默认为inset
如：
<style>
.box {
width: 100px;
height: 100px;
background: deeppink;
box-shadow: 50px 50px 2px gray;
}
</style>
圆⾓：定义圆⾓使⽤ border-radius 属性来定义，它的语法为:
border-radius:length/persentage;
如：
<style>
.box {
width: 100px;
height: 100px;
border-radius: 50%;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。