css边框的秘密
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box
{
width: 100px;
height: 100px;
background: red;
border-top:solid;
border-right: dashed;
border-bottom: dotted;
border-left: double
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>核心：除了样式不可以省略.其他的都可以，但是如果颜色省略了就是默认的黑色。宽度大小如果省略了就是medium;。 编写的顺序：边框的宽度 边框的样式 边框的颜色
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box
{
width: 100px;
height: 100px;
background: red;
border-width: 10 20 30;
border-style: solid solid solid;
border-color: yellow blue pink;
/*以上代表了如果只写上右下的宽度样式颜色的话,左边的颜色样式跟右边的颜色样式相同。*/
}
.box1
{
width: 100px;
height: 100px;
background: red;
border-width: 10 20;
border-style: solid solid ;
border-color: yellow blue;
}
/*如果只写上右的话,下左跟上右的颜色样式一样.*/
.box3
{
width: 100px;
height: 100px;
background: red;
border-width: 10 ;
border-style: solid ;
border-color: yellow ;
}
/*只写一个代表大家都一样*/
</style>
</head>
<body>
<div class="box"></div><br>
<div class="box1"></div><br>
<div class="box3"></div>
</body>
</html>
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/09/01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
