css
文章平均质量分 63
柑橘乌云_
希望我的博客,能帮你解决学习或工作中所遇到的问题
展开
-
伪类和伪元素学习记录
表示任何被禁用的元素。如果一个元素不能被激活(如选择、点击或接受文本输入)或获取焦点,则该元素处于被禁用状态。元素还有一个启用状态,在启用状态下,元素可以被激活或获取焦点。匹配被用户激活的元素。和其他所有的 伪元素一样,::first-line 不能匹配任何真实存在的 html 元素。这个伪类的一些其他适用对象包括包含激活元素的元素,以及可以通过他们关联的。表示当元素或其任意后代元素被聚焦时,将匹配该元素。根据元素在父元素的子元素列表中的索引来选择元素。选择器根据父元素内的所有兄弟元素的位置来选择子元素。原创 2024-08-09 14:55:48 · 989 阅读 · 0 评论 -
CSS 轻松实现常见各类奇形怪状按钮
基于上述的实现,我们不难发现,一些稍微特殊的按钮,无非都通过拼接、障眼法、遮罩等方式实现。渐变(线性渐变、径向渐变、多重渐变)遮罩mask裁剪clip-path变形transform发挥了重要的作用,熟练使用它们,我们对于这些图形就可以信手拈来,基于它们的变形也能从容面对。上述的图形,再配合,基本都能实现不规则阴影。再者,更为复杂的图形,如下所示:还是切图吧,CSS 虽好,实际使用中也需要考虑投入产出比。原创 2024-06-24 10:48:58 · 1480 阅读 · 0 评论 -
div模拟textarea文本域轻松实现高度自适应
看效果可以看到div在获取焦点的时候,会有个黑色边框,如果想要去掉需要设置outline属性为none。需要注意这个div可以识别富文本需要注意安全问题,最好可以做html标签的过滤。这里提供一个平替方法 就是div+contenteditable属性。记录了四种实现textarea自适应的方法,希望可以帮助到敏娜。众所周知文本域不能做到随着内容自适应高度的。原创 2024-04-22 16:27:12 · 389 阅读 · 0 评论 -
常用HTML全局属性学习记录
HTML全局属性详解accesskey、autocapitalize、contenteditable、data-*、draggable、tabindex、dir原创 2024-04-22 11:42:04 · 1204 阅读 · 0 评论 -
draggable 属性------拖拽学习记录
【代码】draggable 属性------拖拽学习记录。原创 2024-04-22 11:17:13 · 545 阅读 · 0 评论 -
html5自定义属性--------Dataset
div class="mm" data-name="无版权">.mm[data-name='无版权']{background:url(mm1.jpg) no-repeat;DOMStringMap对象。原创 2024-04-22 10:57:48 · 705 阅读 · 0 评论 -
如何让contenteditable元素只能输入纯文本
可以看到contenteditable属性值是有一个plaintext-only纯文本的,但是还是兼容性不太好,火狐不支持。而这两者的区别就在于,一个可以输入富文本,而下面一个只能输入纯文本。不用在意,基本上没有浏览器支持,以后估计也不会有。表示只读,就是普通元素的默认状态啦。会让元素表现得像个文本域一样,可以。原创 2024-04-22 10:39:07 · 529 阅读 · 0 评论 -
css实现宽度自适应的波浪线(动态、静态波浪线)
属性控制两个空格占据的宽度足够宽,这样空格字符的装饰线的尺寸一定可以充满整个容器,此时只要设置装饰线的类型是波浪线,宽度100%自适应的波浪线效果就实现了。也很明显,就是波浪线的颜色无法实时跟着文字的颜色发生变化,适用于文字颜色不会多变的场景。:这种实现方法的优点在于非常容易理解,非常容易上手,然后的话颜色很好控制,使用。就是设置两个空格字符,然后两端对齐,这个时候的波浪线自然就正好横跨整个元素了。是线条边缘平滑,效果细腻,易理解,易上手,易维护。属性,代码更轻便,更容易理解,更优雅。原创 2024-04-19 14:20:16 · 1139 阅读 · 0 评论 -
文字内波浪css效果
【代码】文字内波浪css效果。原创 2024-04-19 14:20:04 · 332 阅读 · 0 评论 -
:has()伪类使用
元素就会匹配,是或的关系,不是与。如果希望是与的关系,也就是同时有。我们可以使用这个选择器轻松区分是文字链接还是图像链接。元素会被匹配,而关系更远的后代元素则不考虑。元素有天蓝色边框,而后者表示包含不是。伪类还可以和其他伪类混用,例如。下面的 CSS 代码表示如果。前面的选择器表示没有包含。原创 2024-04-17 11:07:18 · 495 阅读 · 0 评论 -
CSS3 max/min-content及fit-content、fill-available值的详解
上面水平居中的案例就是很好的说明,可以让元素保留原有display值的特性的同时,拥有别的display值的特性。原创 2024-04-17 10:28:54 · 1366 阅读 · 0 评论 -
23年新增CSS属性 container容器查询 容器单位实现字体大小随容器变化而变化
23年新增CSS属性 container容器查询 容器单位实现字体大小随容器变化而变化,容器查询,@container 、container-name和container-type。原创 2024-04-16 17:45:13 · 1309 阅读 · 0 评论