1、设置边框和背景色需要使用css的border和background属性。具体的用法是，首先打开html编辑器，在空白的html文件中，新建一个div和span标签，并在上方head里设置style标签：
2、接着在style标签中设置span和div的标签，首先给它们宽度和高度，接着给他们设置不同颜色，最后设置边框border，border属性的3个值分别代表边框宽度，边框样式，边框颜色：
3、其中边框样式有点线，虚线，双线，实线等不同类别，具体样式在下图中均已列出，可根据自己的喜好选择，这里设置span的边框样式为dashed，div的为solid：
4、最后打开浏览器，就可以看到设置好的效果了。以上就是设置span和div的边框和背景色的方法介绍：
给span加属性 display:inline-block
下面是我修改的代码：.idSpan{
display:inline-block
border:1px solid #999999
margin:2px
padding:5px 10px
background-color: #d0f7c1
font:20px/20px "幼圆","楷体","宋体",Arial,sans-serif
text-align:center
cursor:pointer
}
//解释一下为什么需要加display:inline-block；因为在css中分块级元素和行内元素，块级元素都是从新行开始的，margin和padding四个方向都起作用，如div，而span是行内元素，总在一行内，因此只有margin-left和margin-right有效，宽高和margin-top,margin-bottom,padding都无效。还有一类是行内块元素，顾名思义就是在不换行但拥有块元素其他的性质。改变其属性的方式是display,
display:block就是块,display:inline就是行,display:inline-block就是行内块，你可以通过这个把div变为行内，把span变成块级等等，你想咋样就咋样
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span:hover{
border: 1px solid #000
}
</style>
</head>
<body>
<span>123456</span>
</body>
</script>
</html>
