FromBronzetoKing10CSS3伪类技巧和使用
时间：2023-03-30 16:42:59
CSS
伪类经常与伪元素混淆。伪元素的效果类似于添加一个实际元素所达到的效果，而伪类的效果类似于添加一个实际元素的效果。类来实现。事实上，为了区分两者，css3已经明确规定伪类用一个冒号表示，而伪元素用两个冒号表示。伪类和伪元素的本质区别在于新元素是否是抽象创建的。关于伪类和伪元素的具体知识本文不深入。下面给大家介绍一下从青铜到王者的10个css3伪类的技巧和应用。青铜-1。伪类实现框阴影众所周知，Animate/transitionbox-shadow可以使用box-shadow属性实现框阴影效果，但是repaint消耗较多，所以这里建议修改伪元素的透明度来实现boxshadows的原理：通过改变透明度，让非默认值更新它的值不需要任何重绘（ps：貌似莫名解锁了一个前端css优化，偷笑偷笑）这里是一个空伪-elementsetting阴影的透明度隐藏为0，鼠标悬停可以恢复其透明度。下面是传统和伪类实现的代码对比阴影效果，但是重绘比较消耗
After
修改pseudo的透明度可以达到同样的效果-元素，不重绘消耗
Web前端开发学习Q-q-u-n：784783012，分享开发工具，零基础，进阶视频教程，希望新手少走弯路。之前{填充：1em;背景色：#fff；-webkit-过渡：0.2s；transition:0.2s;}.before:hover{box-shadow:0010px0rgba(0,0,0,0.3);}.after{position:relative;填充：1em；背景色：#fff;}.after:before{content:"";位置：绝对；顶部：0；右：0；底部：0；左：0；z-指数：-1；框阴影：0010px0rgba(0,0,0,0.3);不透明度：0；will-change：不透明度；-webkit-过渡：0.2s；transition:0.2s;}.after:hover:before{opacity:1;}效果：Bronze-2，伪元素：在
首页图片夏15意大利ul.breadcrumb{padding:8px16px;列表样式：无；背景颜色：#eee;}ul.breadcrumbli{显示：内联;}ul.breadcrumbli+li:before{填充：8px;颜色：黑色;content:"/\00a0";}ul.breadcrumblia{color:green;}效果：Bronze-3，伪元素实现悬停时按钮填充和边界浮动动画效果：Bronze-4，伪元素实现的三角箭头classafter实现原理：三边设置边框，箭头所指方向的边框不需要设置。箭头两边的边框颜色是透明的（transparent），反面是主体边框颜色（大一点）/主背景颜色（小一点），因为我们想要一个带边框颜色的三角箭头，当第一个箭头（较大）被第二个箭头（较小）准确覆盖，剩下未覆盖的边缘为复合三角箭头的边框，其颜色为较浅的大三角箭头颜色，可调较小三角箭头的颜色应设置为主体颜色，负定位偏移时应遮盖主体框，以便与主体结合。 