一、添加边框
<!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>
显示效果如下：
|
窥视卡
雷达卡
发表于 2023-2-1 10:32:13
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-18 00:17:34
