css完成的圆角实际效果带有注解

日期:2021-01-20 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

圆角注解

拷贝编码
编码以下:

/**
*这个圆角的思路在于,用变小化的视觉效果体会反映的,实际上每个弯角是用两个像素的"-"与1个像素的"."与两个像素的"|"完成的.
*b1与b1b相对性,根据情况来制做边框
*b2与b2b相对性,根据border-width:2px制做2个像素的"-"
*b3与b3b相对性,制做1个像素的"."
*b4与b4b相对性,制做2个像素的"|"这样就从视觉效果上觉得是1个圆弧了。
*/
/*明确为block,以便让上下边框完成*/
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{
display:block;
overflow:hidden;
}
/*高宽比为1的关键目地是以便让b1,b1b做为的情况色作为左右线*/
.b1,.b2,.b3,.b1b,.b2b,.b3b{
height:1px;
}
/*上下边框的色调与尺寸*/
.b2,.b3,.b4,.b3b,.b4b,.b2b,.b{
border-left:1px solid #999;
border-right:1px solid #999;
}
/*留意每一个的上下边距与色调*/
.b1,.b1b{
margin:0px 5px;background:#999;
}
/*边距为3少了2个像素 - */
.b2,.b2b{
margin:0px 3px;border-width:2px;
}
/*边距为2少了1个像素 . */
.b3,.b3b{
margin:0px 2px;
}
/*边距为1少了1个像素 |*/
.b4,.b4b{
margin:0px 1px; height:2px;
}
/*div的情况色与border的情况色要不一样*/
.d1{
background:#f7f8f9;
}
/*宽度特定*/
.k{
height:300px;
}
</style>
</head>
<body>
<div>
<b class="b1"></b>
<b class="b2 d1"></b>
<b class="b3 d1"></b>
<b class="b4 d1"></b>
<div class="b d1 k">
<font style="font-size:26px;color:red; margin:0px 10px;">简约型css圆角矩形框</font>
</div>
<b class="b4b d1">
</b><b class="b3b d1">
</b><b class="b2b d1">
</b><b class="b1b"></b>
</div>
上一篇:!important用法应用详细介绍 返回下一篇:没有了