1.background-color
<style> .box { width: 200px;/*w100*/ height: 200px;/*h100*/ background-color: mediumpurple; } .box1 { width: 100px; height: 100px; background-color: #ccc; position:absolute; left:8px; top: 8px; } .box2 { width: 300px; height: 300px; /*rgb()中需要写数字,数字的范围在~255之间,值越小颜色越深*/ background-color: rgb(255,200,200); position:absolute; } .box3 { width: 100px; height: 100px; /*rgba()中最后一个值表示透明度,范围在0~1之间,0表示完全透明,1表示完全不透明*/ background-color:rgba(0,255,255,0.5); position:absolute; left: top: } </style> </head> <body> <div class="box"></div> <div class="box1"></div><!--div.box1--> <div class="box2"></div> <div class="box3"></div> </body>
2.background-picture
<style> .box { width: 1000px; height: 1000px; border:1px dotted #000000; /* 设置背景图片*/ background-image: url("images/肖战.jpg"); background-repeat: no-repeat; /* background-position:right top;*/ background-position:10px 20px; /* background: gray url("images/肖战.jpg") no-repeat center center;*/ } </style> </head> <body> <!-- 通过样式来设置背景图片时,需要使用background-image属性来设置,而图片的路径需要写在url()中 但是,默认情况下,背景图片如果没有容器大的话,那么它会把背景图平铺后展示 对于背景图的处理,我们有以下几种方式: 1.np-rapeat:不平铺 2.rapeat-x:x轴方向平铺 3.rapeat-y:y轴方向平铺 4.repeat:x轴和y轴方向都平铺(默认方式) 要想设置面的值,我们需要另外的属性叫background-rapeat 背景图在容器中间: 需要使用 background-position属性来指定,它通过坐标来设置,有以下几种属性: 1.left top:左上角(默认) 2.right top:右上角 3.left bottom:左下角 4.right bottom:右下角 5.left center:左中 6.right center:右中 7.center center:居中 以上这些属性,我们可以使用background来统一指定,它的语法格式为: background: color position size repeat origin clip attachment image; --> <div class="box"></div> </body>
3.边框
<style> .box { width: 100px; height: 100px; background:#cccccc; /*设置左边框的颜色*/ border-left-color:blue; /*s=设置左边框的样式:solid实线,dotted小圆点构成的线*/ border-left-style: dotted; /*粗细(宽度)*/ border-left-width:2px; border-top-color:deepskyblue; } </style> </head> <body> <!-- 指定边框可以使用 border-left/top/right/bottom-color来设置颜色 border-left/top/right/bottom-style来设置颜色 border-left/top/right/bottom-width来设置颜色 在实际开发中,我们使用 border 属性来统一指定即可 语法格式为: border: 线的宽度 线的样式 线的颜色 上面这种方式指定的话有一个缺点:四个边的宽度,样式和颜色都是相同的 --> <div class="box"></div> </body>
4.内边距
<style> .box { width: 200px; /*height: 200px;*/ border:1px solid black; padding-left:20px; /*左内边距*/ padding-top: 20px; padding-right:20px; padding-bottom: 20px; } </style> </head> <body> <!--内边距: 容器中内容和内容边线的距离 内边距是使用padding属性来设置的 -左边:padding-left -上边:padding-top -右边:padding-right -下边:padding-bottom 可以使用padding属性来设置这四个边距, 1.设置四个值:上 右 下 左!!!! 2.设置三个值:上 左右 下 3.设置两个值:上下 左右 5.设置一个值:上右下左的值都是一样 --> <div class="box">陈情令陈情令陈情令陈情令陈情令陈情令陈情令</div> </body>
5.外边距
<style> .box { width: 400px; height: 200px; border:1px blueviolet solid; } .xz { width: 100px; height: 100px; border:1px greenyellow solid; margin-left:20px; margin-top:20px; } </style> </head> <body> 外边距: 容器与另一个容器之间的距离 外边距使用 margin 属性,它的使用和语法格式与 padding 相同 - margin-left:左边距 - margin-top:上边距 - margin-right:右边距 - margin-bottom:下边距 仍然可以使用margin来指定 1.设置四个值:上 右 下 左!!!! 2.设置三个值:上 左右 下 3.设置两个值:上下 左右 5.设置一个值:上右下左的值都是一样
6.阴影
<style> .xz { width: 100px; height: 100px; background: deepskyblue; } </style> </head> <body> <!-- 定义阴影效果使用 box-shadow 属性,语法格式: box-shadow: h-shadow v-shadow blur spread color position; - h-shadow :必需 水平阴影的位置,允许负值 - v-shadow :必需 垂直阴影的位置,允许负值 - blur :可选 模糊距离 - spread :可选 阴影尺寸 - color :颜色,参考 css颜色值 - position :可选 ,将外部阴影(outset)改为内部阴影。默认为inset --> <div class="xz"></div> </body>
7.圆角
<style> .xz { width:100px; height: 100px; background:blueviolet; /*border-radius: 10px;*/ /*border-radius:50%;!*圆*!*/ /*border-radius: 10px 20px 30px 40px;*/ } </style> </head> <body> <div class="xz"></div> </body>