标签：solid top 元素 基础知识 content 25px border transparent
伪元素：
概念：指可以在HTML标签的开头或者结尾通过css来添加内容，该内容可以单独设置css 样式。
作用：能够实现一些页面效果，比如三角形
-
语法：
-
在标签开头添加内容
-
::before{
content: ''
} -
::before是伪元素专用选择器，能够在标签开头添加内容，内容可以是图片或者文字或者空格。
-
特点：
通过伪元素添加的内容可以当做改标签的子元素，可以设置盒模型和宽高颜色之类的CSS属性。。
-
‘content 属性可以设置图片，但本身不容易设置位置，一般来说如果添加图片 会通过设置背景图片来处理’ 让content:'';即可
a::after在标签结尾添加内容。
a::after{
content:'';
}
border: 20px solid transparent;(透明色)
利用伪类元素实现三角形。
-
利用 ::before ::after 添加伪元素
-
宽高为0，然后设置透明border: 20px solid transparent;(透明色)
-
将其中一边border 显示出来， border-right: 25px solid rgb(48, 15, 77); 并设置颜色，将伪元素设为绝对定位，父元素（添加伪元素前的标签）设置为相对定位。
-
利用top left 等属性来改变位置
div::before{
content: '';
/* 设置透明色 */
border: 25px solid transparent;
/* 显示的是一个梯形 */
border-right: 25px solid rgb(48, 15, 77);
/* 如果设置成一个三角形 */
position: absolute; /*绝对定位元素真的父类或者body */
top: 25px;
left:-25px;
z-index: -1;
}
代码区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
/* 去掉无序列表前的小圆点 */
list-style: none;
/* 去掉padding */
padding:0px;
width: 400px;
height: 50px;
margin: 50px auto;
position: relative;
}
ul::before{
content: '';
position: absolute;
border: 25px solid pink;
border-left: 25px solid transparent;
top: 0px;
left: -50px;
}
ul::after{
content: '';
position: absolute;
border: 25px solid pink;
border-right: 25px solid transparent;
top: 0px;
right: -50px;
}
li{
float: left;
height: 100%;
width: 100px;
/* 让文本垂直居中 */
text-align: center;
line-height: 50px;
background-color: pink;
/* 字体背景颜色 */
color:snow;
}
/* 将.active 切换成li:hover */
li:hover{
background-color:yellowgreen ;
/* 将标签放大1.5倍 */
transform: scale(1.2);
margin-top: -17px;
position: relative;
z-index: 2;
transition: all 1.5s;
}
/* /* li:hover{
动画时间
transition: all 1.2s;
} */
li:hover::before{
content: '';
position: absolute;
border: 10px solid transparent;
border-right: 9px solid yellowgreen;
top: 40px;
left:-10px;
}
li:hover::after{
content: '';
position: absolute;
border: 10px solid transparent;
border-left: 9px solid yellowgreen;
top: 40px;
right:-10px;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li class='active'>购票</li>
<li>订单</li>
<li>个人中心</li>
</ul>
</body>
</html>
标签：solid,top,元素,基础知识,content,25px,border,transparent 来源： https://blog.csdn.net/m0_61123456/article/details/121168265
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。