CSS核心（三十）直角边框、3D边框border 与边框阴影 box-shadow
一、添加边框<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>直角边框与3D边框 添加边框后会增加盒子的尺寸</title>
</head>
<style>
div{
width:200px;
height:200px;
background:#eee;
/* 边框类型
outset 3d外边框
inset 3d内边框
none 无边框
hidden 与 "none" 相同。不过应用于表时，hidden用于解决边框冲突。
dotted 点状边框
dashed 虚线边框
solid 实线边框
double 双线边框
groove 3D 凹槽边框
ridge 3D 垄状边框
inherit 从父元素继承边框样式
*/
/* border-style: outset; */
/* 边框颜色 */
/* border-color:#00f; */
/* 边框宽度 */
/* border-width:10px; */
/* border:10px #000 solid; */
border-top:10px #000 solid;
border-left:50px solid #00f;
}
.box{
width:200px;
height:400px;
background:#abcdef;
}
.box span{
display:inline-block;
width:100px;
height:100px;
}
.s1{
background:#f00;
border-left:1px solid #000;
}
.s2{
background:#0f0;
}
</style>
<body>
<div class="box">
<span class="s1"></span><span class="s2"></span>
</div>
</body>
</html>
显示结果如下：
以上代码中，我们仅给父盒子设置了左边框和上边框，其它属性大家可以自己动手慢慢测试一下，在代码中都有详细注释。
特别需要注意的是：添加边框后会增加盒子的尺寸。
二、边框阴影
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>直角边框、3D边框与边框阴影</title>
</head>
<style>
.box{
width:200px;
height:200px;
border:50px solid #000;
/* 参数一为水平偏移,参数二为垂直偏移,参数三为模糊度,参数四为边框颜色 */
box-shadow:10px -10px 3px #f00;
}
</style>
<body>
<div class="box">
</div>
</body>
</html>
显示效果如下：
^很好，最苦最难事的事也许就在于些吧。 很好啊，是真的啊看过了有好多的感慨啊！！！！！！！！！！！ 我作为初学者，更是应该先把基础打牢固 很好```受教了`` 编程 a我不懂但是我正要学编程呢希望我能学的不一定有你好 但也要和你一样可可 够qiang ^精华啊，虚心学习 很好啊！我觉得自己太差太差了！ 说得很精彩!~~~~~~~~~ 以后我也要多多的学学了！~~~~~~~