下面这个例子是CSS实现的效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">
可以通过设置单元格元素td的边框样式来实现：
border: width style color; /分别设置边框的粗细、样式和颜色/示例如下：
在HTML代码中给出两个表格
<table class="tb1"><tr><td>有</td><td>志</td><td>者</td></tr>
<tr><td>事</td><td>竟</td><td>成</td></tr>
</table>
<table class="tb2">
<tr><td>苦</td><td>心</td><td>人</td></tr>
<tr><td>天</td><td>不</td><td>负</td></tr>
</table>
分别设置不同的样式
table{ / 表格整体样式 /margin:50px; / 外边距50px /
border-collapse:collapse; / 合并为单一的边框线 /
}
/ 设置tb1类的表格样式 /
tabletb1 td{padding:10px;border:1px solid green;}
/ 设置tb2类的表格样式 /
tabletb2 td{padding:20px;border:5px dashed blue;}
最终效果如下
html代码：<table width="266" height="97" border="0" cellpadding="0" cellspacing="0" class="baoxiu_ck_k1">
<tr>
<td width="60"> </td>
<td width="60"> </td>
<td width="60"> </td>
<td width="84" class="last"> </td>
</tr>
</table>
css代码：
table{border-collapse:collapse;border-spacing:0;}
baoxiu_ck_k1 {
border:1px solid #FF643E;
}
baoxiu_ck_k1 td{border-right:1px solid #000;}
baoxiu_ck_k1 last{ border:none;}
CSS设置div边框颜色宽度和高度步骤如下：
1、新建一个html文件，创建一个类名为wrap的div。
2、先通过css类选择器选择到div来控制div的宽度和高度和背景颜色（没有边框时方便看出来div的大小）。
3、通过div 的border属性控制边框颜色，设置border的宽度为2px，线型为实线，颜色为蓝色。
4、这样就可以设置div边框颜色宽度和高度，如下图：
扩展资料：
css border属性：
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
border-width，border-style，border-color
如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。
用新的边框我们先要除去旧的边框才可以，然后再给他加上新边框，如下：
一，先除去：
1，看下默认样式效果，如图可以看到，默认padding和border，字体大小也是受浏览器默认指定
2，去除padding，指定一个字体大小，这里匹配了表示所有元素，因为大部分的默认margin和padding都需要先去除，统一去除，后面需要再单独有针对性的添加
{
margin: 0;
padding: 0;
font-size: 100%;
}
3，默认padding去除之后，按钮之间有间隙，这是inline-block默认的间距，用float来去除，并指定合适的宽和高
button{
float: left;
width: 60px;
height: 60px;
}
4，间距去掉了，但都显示成一行了，这个是因为添加的浮动影响的，可以在div元素后面去除浮动
div:after{
content: "";
display: block;
clear: both;
}
5，此时，可以看到边框重叠导致边框宽度不一致，需要自定义边框
border: 1px solid black;
margin-right: -1px;
margin-bottom: -1px;
6，从上面的图中，可以看到，在鼠标点击按钮的时候，会有蓝框选择的样式
加上outline: none;来去除
二，再加上是使用如下的编程方法：
<html xmlns=">
导致会出现边框的原因是CSS的默认设置，所以只要把这个默认设置改掉就可以了。然后就可以加上你想要的边框了哦！
1、新建HTML文件。
2、创建HTML标签和内容。
3、预览效果如图。
4、设置右边框的颜色border-right-color:#30C。
5、预览效果如图。
6、设置右边框的颜色border-right-color:rgb(204,0,102)。
7、预览效果如图。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）