学习《css世界》笔记之使用css实现凹凸效果

显示效果


HTML

<span class="ao"></span> <span class="tu"></span>

CSS

.ao,.tu{display: inline-block;width: 0;font-size: 14px;line-height: 18px;margin: 35px;/* color: #fff; *//* 文字颜色 */}.ao:before,/* :before的主要作用是在内容前面添加指定内容，与之相反的是:after */.tu:before{/* outline是绘制于元素周围的一条线，位于边框边缘的外围，课起到突出元素的作用，ps:在边框外面 */outline: 2px solid #A52A2A;}.ao:before{content: 'love你love';}.tu{/* 设置元素的文本方向：ltr：默认 内容从向右流动 rtl：内容从右向左流动 inherit：从父元素继承 */direction: rtl;}.tu:before{content: '我love你';}

总结

以上是生活随笔为你收集整理的学习《css世界》笔记之使用css实现凹凸效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。