学习《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你';
			}