1.背景颜色
<style>
.box {
width: 300px;
height: 300px;
background-color: blueviolet;
}
</style>
可以简单的设置背景,包括颜色,大小和坐标。
2.背景图片
<style> .box { width: 3000px; height: 3000px; border: 10px dotted red; left: 1500px; top: 100px; background-image: url(image/19b41ee997b3532e.png); background-repeat: no-repeat; background-position: center center; background-size: 2000px; background-color: #00ff19; position: absolute; } .box1 { width: 1000px; height: 1000px; background-color: rgba(245, 232, 94, 0.84); position: absolute; left: 800px; top: 800px; } </style>
可以设置背景图片的大小颜色和方位坐标,还可以选择填充背景的方式。
3‘边框属性
<style>
.box {
width: 100px;
height: 100px;
background: #cccccc;
}
</style>
可以自定义一个基础边框,并编辑其元素,包括颜色大小和坐标
3.内边距和外边距
<style>
.box {
width: 200px;
/*height: 100px;*/
border: 1px solid black;
/*左内边距*/
/*padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;*/
/*padding: 10px 20px 30px 50px;*/
/*padding: 10px 30px 50px;*/
/*padding: 10px 50px;*/
padding: 10px;
}
</style>
<style>
.box {
width: 300px;
height: 200px;
border: 1px solid gray;
}
.inner {
width: 200px;
height: 100px;
border: 1px solid blueviolet;
/*margin-left: 20px;
margin-top: 20px;*/
margin: 20px 50px 30px;
}
</style>
可以设置边框元素中的属性。
4.浮动
<style>
ul,li {
padding: 0;
margin: 0;
}
li {
list-style: none;
width: 60px;
height: 25px;
float: left;
}
.clear {
/*清除浮动*/
clear: both;
}
</style>
可以改变文字的位置方向
5.阴影
<style>
.box {
width: 100px;
height: 100px;
background: deeppink;
box-shadow: 50px 20px 2px blueviolet;
}
</style>
顾名思义可以为图片设置一个阴影并自定义其阴影属性。
6.圆角<style>
.box {
/*width: 100px;
height: 100px;*/
width: 120px;
height: 160px;
background: blueviolet;
/*border-radius: 10px;*/
/*border-radius: 50%;*//*圆*/
/*border-radius: 10px 20px 30px 40px;*/
/*border-radius: 10px 30px 60px;*/
/*border-radius:20px 40px;*/
/*border-radius:100px/40px;*/
border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;
}
</style>
可以为图像设置弧度从而达到圆形甚至其他形状的不规则图形。