今天遇到一个问题：div边框和背景色随主题色变化，边框和字体不透明，背景半透明（如下图所示）在网上搜索解决办法发现都是说使用rgba，但是另外一个问题就来了，背景和边框的颜色就没办法改变了，所以只好自己想办法。突发奇想使用伪类完美解决了问题，话不多说，上代码（此处样式部分使用了scss，不懂的请自行百度）<!-- html代码 --><di …
opacity css
一、页面样式引入link和@import 之间的区别link是xhtml标签，除了加载css外，还可以定义rss等其他事务，@import 属于css范凑，只能加载csslink引用css时，在页面载人同时加载，@import需要页面网页完全载入后加载，所以出现一开始css样式，闪烁一下出现样式后的页面速度慢link是xhtml标签，无兼容问题，@impor …
制作这几个很常用的CSS3网页小效果。最近写JS的时间比例比较多，不过我还是比较钟情于CSS3。所以我还是坚持分享一些实用的CSS3小例子。正文第一种效果：由于录制gif图片会掉帧，所以看起来不流畅，很卡，但其实实际效果还是不错的，有弹性一些。html代码：<span class="shake">弹<span>css代码:.shake …
CSS3规范的一个新特点是被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布，及时调整模块的内容，这些模块独立实现和发布，也为日后CSS的扩展奠定了基础。另外一方面，由于受支持设备和浏览器厂商的限制，没备或者厂商可以有选择的支持一部分模块，支持css3的一个子集，这样有利于CSS3的推广。CSS3--3种隐藏元素方法的区别displ …
借助CSS所提供的动画效果，旋转效果除了能够制作动画及网页页面元素，如按钮之外，还可以使用CSS实现精美的动态片头的制作。本文主要介绍CSS与HTML实现精美的动画片头制作实例。CSS动态片头设计实例本例设计使用烟雾粒子效果与动态文本结合，实现动态片头效果，文字内容随着烟雾而动态生成、展示，案例最终效果要求描述如下：本例设置实现动态效果描述如上图所示，主要内 …
我们在做PC端项目的时候，常常会碰到透明背景和透明图片的的需求，但是透明度常常有会发生很多问题，特别是背景透明内容不透明，想要兼容所有浏览器实现起来就比较麻烦。如何实现背景透明，文字不透明，兼容所有浏览器？其实平时说的调整透明度，其实是在样式中调整不透明度，如下图：打开ps，在图层面板上，可以看到设置-图层调整 不透明度的菜单，从 0% （完全透明）到 10 …
本文摘自这一年来自己在工作中经历的几个比较好的CSS问题（不一定复杂，但个人觉得都挺值得一说），这些CSS问题平时很少遇到，即使遇到后也不一定知道解决方案，即使知道解决方案也不一定知道产生的原理，同时也准备了2个JS问题，希望帮到各位朋友。期待您的点赞，谢谢。一、CSS篇1.1 元素默认蓝色边框input标签元素（如button、text 、areatext …
在现代Web开发中，CSS是不可或缺的一部分，它决定了网页的样式和布局。编写高质量的CSS代码不仅可以提高开发效率，还可以提升网页性能和用户体验。本文将为您分享一些有助于编写高质量CSS代码的技巧和建议，助您成为CSS编程的高手！一、遵循CSS规范编写高质量的CSS代码的第一步是遵循CSS规范。CSS规范定义了一系列的命名规则、代码结构和最佳实践，可以使代码 …
html语义化的理解之前HTML仅是冷冰冰的结构化标签，没有语义。后HTML5加入语义化标签，使结构语义化，在没有CSS的情况下，很好呈现内容结构，易于书写阅读理解，SEO（依赖标签及关键字权重）header, footer, nav, hgroup, aside, section盒子模型，以及标准情况和IE下的区别``` box-sizing:border …
在工作中，为了提升工作效率与持续学习，常常会收集整理很多素材，有网站案例源码，有片段的代码特，在这里我收集的一些CSS小技巧。我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台 …