之前在看一个文章的时候有提到过,background
的这两个属性,确实不常用到,以至于没有几个人知道这两个新属性。
和他们同时期出的 background-size
因为经常用到所以被大众所熟知。
对的,这次我要说的是background-origin
和 background-clip
两兄弟
之前在看一个文章的时候有提到过,background
的这两个属性,确实不常用到,以至于没有几个人知道这两个新属性。
和他们同时期出的 background-size
因为经常用到所以被大众所熟知。
对的,这次我要说的是background-origin
和 background-clip
两兄弟
今天有一个小伙伴在群里问,怎么让鼠标经过的移出效果和移入效果相反。
比如说
移入的时候先让元素增加宽度,接着增加高度,最后显示内部元素,
鼠标移出的时候,先收缩高度隐藏元素,最后还原宽度。
看了一些回复有些答非所问,或者推荐用 Js 的。
最开始想的是,animation
是不是有一个 direction
属性可以设置反向么,
就想看 transition
是不是也有,但是并没有。CSS transition - MDN
所以就想着用 :hover
来覆盖原先的 transition
我一直记忆的是
position:relative
是相对于父级元素定位的,今天才发现原来自己记错了。
也想明白了绝对定位的元素使用margin:auto
为什么可以实现垂直居中
今天早上心有点静不下来,就去 SegmentFault 上看了看文章,有一篇文章 【“寒冬”三年经验前端面试总结之 CSS 篇】,
里边的 垂直居中的方法四
我觉得挺奇怪的。
content: url('...');
最近在群里看到一种写伪类 content
的用法,觉得很新奇,
群友一开始使用伪类来显示一个小图标,但是这个小图标比较大,
所以他就像设置宽高来显示这个伪类,但是他怎么都设置不了这个伪类的宽高,
我就和他说你设置伪类的宽高不就好了嘛?(我一直以来都是用伪类设置背景图片的形式来做 icon)
他说不行,我就看到了这个独特的写法…
他是直接在 content
里边写了图片的 url
,然后神奇的是居然可以显示 content
里填写的图片!!!
以前只知道 border-radius
有一个圆角半径,今天在做一个半圆的时候突然发现,它还有 x 轴和 y 轴属性。
border-radius
说明:CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
该属性是一个 简写属性,是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius,和 border-bottom-left-radius 简写为一个属性。
也就是说,每个圆角都有 圆角半径
、 水平半长轴
和 垂直半长轴
属性值:
单行文字的截断非常简单,但多行文字的截断就很麻烦了,
经常要配合 JavaScript 或者 其他语言进行字符串截断,然后拼接上 “…”
突然发现 line-clamp
它可以完成以纯 CSS 的多行文本截断,
并且配合 text-overflow: ellipsis
就可以在尾部加上省略号,
当然 overflow: hidden
并不可缺少
Meathill:纯 CSS 组件顾名思义,只改变外观,不改变行为。所以它的功能不会因为浏览器变化而变化,即使浏览器支持不完善,即使因为加载速度或者网络关系,导致 CSS、JS 加载失败,它最多样式回归到原始样式,功能是完全一致的。在非标准浏览器环境下,如读屏器,也是如此
前年看肉大直播的时候听到:万能的 :checked + label
当时没有体会到有啥万能,不就是自定义 input
样式吗,直到前段时间看到一个 Demo 虽然不是使用的这种方法,但是我突然就明白了,这个就可以用 :checked + label
来实现。
…
原来很多需要 Js
配合的一些效果点击效果只需要 :checked + label
就可以完成。