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也是允许的。
select样式要想非常好看，单用CSS是实现不了的，必须要用到JS才行！下面这个例子是CSS实现的效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>如何让select的样式也漂亮起来</title>
<style type="text/css">
<!--
.select * {
margin: 0
padding: 0
}
.select {
border:1px solid #cccccc
float: left
display: inline
}
.select div {
border:1px solid #f9f9f9
float: left
}
/* 子选择器，在FF等非IE浏览器中识别 */
.select>div {
width:120px
height: 17px
overflow:hidden
}
/* 通配选择符，只在IE浏览器中识别 */
* html .select div select {
display:block
float: left
margin: -2px
}
.select div>select {
display:block
width:124px
float:none
margin: -2px
padding: 0px
}
.select:hover {
border:1px solid #666666//鼠标移上的效果
}
.select select>option {
text-indent: 2px//option在FF等非IE浏览器缩进2px
}
-->
</style>
</head>
<body><div class="select">
<div>
<select>
<option>看见效果了吧</option>
<option>看见效或纤果了吧</option>
<option>看见效果了吧</option>
</select>
</div>
</div>
</body>
</html>
-------------------
关于JS代码配团裂，你可培闭以去看下这个，改了之后就能达到你要的效果：
http://www.geekso.com/select-css/
单纯的CSS是实现不了的！！！
我比较喜欢用简写的，给你列一下简写的边框样式吧：border:1px solid #FF0000
表示4条边都是逗简轮1像素直山信线边咐液框，红色。
1px表示边框宽度，solid表示直线（虚线可以用dashed），#FF0000是颜色值（这个不用我多说了吧）
如果要定义4条边都不一样，那么用：
border-top:
border-right:
border-bottom:
border-left:
分别表示上右下左的边框，后面的值参照border就可以了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）