CSS——伪元素：before画圆、插⼊图⽚1、&:before画圆
<template>
<div>
<div class="title">今⽇新增量</div >
<div/>
<template>
<style>
title {
position: relative;
&:before {
// top: 5px;
/
/ left: -15px;
position: absolute;
display: block;
width:10px;
height:10px;
border-radius:50%;
background: #fa6861;
content:'';
}
}
<style/>
效果图：
2、&:before竖条
<template>
<div>
<div class="title">前⾯加个竖条</div >
<div/>
<template>
<style>
.title {
position: relative;
&:before {
top:25px;
left:80px;
position: absolute;
display: block;
width:6px;
height:30px;
background: #4d99f9;
content:'';
}
}
<style/>
3、&:before插⼊图⽚
<template>
<div>
<div class="title">前⾯加个图⽚</div >
<div/>absolute relative
<template>
<style>
.
title {
position: relative;
&:before {
content:'';
position: absolute;
left:75px;
top:26px;
height:28px;
width:12px;
background:url('~@/assets/images/second-title.png') no-repeat;
background-size:100%100%;
}
}
<style/>
效果图：
4、渐变背景颜⾊
background: linear-gradient(to right,rgb(68,222,197),rgb(78,188,250))；效果图
5、阴影⽴体效果
box-shadow:06px 12px 0rgba(121,118,118,0.34);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。