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写就可以