css文本 文字 背景 边框
*{
margin: 0;
padding: 0;
}
.box_1{
width: 500px;
height: 200px;
background-color: aquamarine;
/* 文本位置对齐方式 left center right */
text-align: center;
background-image: url(../biao/04.jpg);
background-size: 100%;
}
.box_1 span{
/* 文本颜色 */
color: blue;
/* 文字大小 */
font-size: 20px;
/* 文字字体 */
font-family: "宋体";
/* 文字样式 文字倾斜 */
font-style: italic;
/* 小型的大写字母 */
font-variant:small-caps ;
/* 文字加粗 normal正常*/
font-weight: bold;
/* 文本阴影 */
/* 水平方向上的位置 竖直方向上的位置 模糊度 颜色 */
text-shadow: 2px 2px 2px gray;
}
/* 艺术体 */
@font-face{
src: url();
font-family: "自己起";
}
.box_1>a:nth-child(2){
text-decoration: underline line-through;
/* capitalize首字母大写 lowercase所有小写 uppercase所有大写*/
text-transform: capitalize;
}
p{
/* 文本缩进 */
text-indent: 2em;
}
#box{
/* background-color: aqua; */
border: 1px solid rgb(235, 201, 235);
width: 270px;
height: 500px;
/* 文本水平位置居中 */
text-align: center;
/* 文本竖直位置居中 div有多高就设多高 */
line-height: 500px;
background-repeat: no-repeat;
/* 背景尺寸 cover指的是占满整个容器 100%展示*/
background-size: 100%;
/* 背景定位 属性值有两位 只写一个的情况，另外一个默认中间*/
background-position: center;
background-image: url(../biao/02.jpg);
}
body{
background-color: rgb(228, 193, 200);
background-size: cover;
background-image: url(../biao/06.jpg);
/* 背景固定 */
background-attachment: fixed;
}
#box_2{
padding: 10px;
width: 270px;
height:270px;
/* 综合属性 线宽 线的样式 颜色 */
border: 10px solid rgb(245, 216, 149);
background-size: cover;
background-image: url(../biao/01.jpg);
/* background-clip 规定背景的绘制区域默认border-box */
background-clip: content-box;
/* background-origin: padding-box; */
}
#box_3{
padding: 10px;
width: 270px;
height:270px;
border: 10px solid rgb(245, 216, 149);
background-size: cover;
background-image: url(../biao/05.jpg);
/* background-clip 规定背景的绘制区域默认border-box */
background-clip: border-box;
}
#box_4{
width: 270px;
height: 270px;
/* 边框线宽 */
border-width: 10px;
/* 线的样式 */
border-style: solid;
/* 线的颜色 */
border-color: rgb(180, 200, 238);
border-top-color: rgb(162, 236, 236);
border-right-color: rgb(210, 210, 239);
/* border-color: ; 属性值有两个：上下 左右；
三个：上 左右 下；
四个：上 右 下 左； */
}
a{
text-decoration: none;
color: black;
display: block;
width: 50px;
height: 50px;
background-color: burlywood;
text-align: center;
line-height: 50px;
/* 设置圆角 */
border-radius: 50%;
}
a:hover{
background-color: brown;
/* 盒阴影（容器阴影） 水平位移 竖直位移 模糊度 颜色 */
box-shadow: 2px 5px 2px gray;
text-shadow: 2px 2px 2px gray;
}
#box_5{
width: 400px;
height: 300px;
border:15px solid transparent ;
/* border-width: 10px; */
/* border-style: dashed; */
border-color: aquamarine;
/* round平铺 stretched拉伸 repeat重复*/
border-image: url(../biao/01.jpg) 27 30 round;
}
#box_6{
/* 三角形 */
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent transparent transparent green;
}
上面代码是：css中写的 下面照片中的代码就在html写就可以