介绍 & lt; ! DOCTYPE html>
& lt; html>
,,,& lt; head>
,,,,,,,& lt; meta charset=皍tf-8"比;
,,,,,,,& lt; title>边境制作书签(图形)& lt;/title>
,,,,,,,& lt; style>
,,,,,,,,,,,.div2: before {,/*做一个书签效果*/,,,,,,,,,,,,,,,位置:,绝对的,,/*必须*/,,,,,,,,,,,,,,,:,50 px;
,,,,,,,,,,,,,,,左:,20 px;
,,,,,,,,,,,,,,,z - index:, 1;
,,,,,,,,,,,,,,,,身高:0;
,,,,,,,,,,,,,,,padding-right:, 10 px;
,,,,,,,,,,,,,,,粗细:,大胆;
,,,,,,,,,,,,,,,,行高:0;
,,,,,,,,,,,,,,,颜色:,# 000;
,,,,,,,,,,,,,,,边界:,15 px solid # ee7600;
,,,,,,,,,,,,,,,border-right-color:,透明的,,/*右边框透明,变成空缺的角*/,,,,,,,,,,,,,,,内容:,& # 39;书签& # 39;;
,,,,,,,,,,,,,,,不必:,0,5 px 5 px 5 px # 000;
,,,,,,,,,,,}
,,,,,,,,,,,.div2: after {,/*书签的夹角*/,,,,,,,,,,,,,,,内容:,& # 39;& # 39;;
,,,,,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,,,,,:,80 px;
,,,,,,,,,,,,,,,左:,20 px;
,,,,,,,,,,,,,,,边界:,4 px solid # 89540 c;
,,,,,,,,,,,,,,,border-left-color:,透明;
,,,,,,,,,,,,,,,border-bottom-color:,透明;
,,,,,,,,,,,}
,,,,,,,& lt;/style>
,,,& lt;/head>
,,,& lt; body>
,,,,,,,& lt; div 类=癲iv1"祝辞& lt;/div>
,,,,,,,& lt; div 类=癲iv2"祝辞& lt;/div>
,,,& lt;/body>
& lt;/html>
小编给大家分享一下怎么利用CSS实现书签效果,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
<强>实现的效果图如下:
<强>示例代码如下:
看完了这篇文章,相信你对“怎么利用CSS实现书签效果”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
