div+css实现凹凸形状
作者:互联网
div+css实现凹凸形状
实际效果图
CSS代码片段
在head区域插入css的 代码片
.
<style type="text/css">
.ao,
.tu {
display: inline-block;
width: 0;
font-size: 16px;
line-height:23px;
margin: 35px;
color: #fff;/*文字白色是为了显示不可见*/
}
.ao:before,
.tu:before {
outline: 2px solid #4788D8;
}
/*使用文字撑开div形状*/
.ao:before {
content: "aoa凹aoa";
}
.tu{
direction: rtl; /*把文本方向设置为“从右向左”:*/
}
.tu:before {
content: "凸tutu凸";
}
</style>
HTML代码
<div class="ao"></div>
<div class="tu"></div>
<div class="ao"></div>
<div class="tu"></div>
其他
[1]: 技术交流Q群 149663025
标签:代码,tu,ao,凹凸,div,css,before 来源: https://blog.csdn.net/DJCBPL/article/details/88987973