0 喜欢

【持续更新】你可能不知道的CSS技巧

admin
admin
2023-05-04 16:29:39 阅读 2494

shape-outside

shape-outside 的CSS属性定义了一个可以是非矩形的形状,相邻的内联内容应围绕该形状进行包装。 默认情况下,内联内容包围其边距框; shape-outside 提供了一种自定义此包装的方法,可以将文本包装在复杂对象周围而不是简单的框中。

mix-blend-mode

mix-blend-mode CSS属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

backface-visibility

backface-visibility CSS属性指定当元素背面朝向观察者时是否可见。

background-clip

background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。

纯CSS实现的波浪动画

基于Radio实现的Tab切换

使用Padding保持图片宽高比

padding-toppadding-bottom 的百分比填充都是基于父元素的宽度,更多信息请访问aspect-ratio-boxes

CSS实现优惠卷效果

了解radial-gradient()的使用

clip-path

clip-path CSS属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。

:placeholder-shown

这是一个目前还是实验性质的属性,:placeholder-shown CSS伪类在 InputTextarea元素显示 placeholder text时生效.

:out-of-range 和 :in-range

纯CSS实现的3D轮播效果

See the Pen 3d_carousel by pdslly (@pdslly) on CodePen.

CSS计数器

See the Pen css-counter by pdslly (@pdslly) on CodePen.

background-clip实现文字渐变

See the Pen background-clip by pdslly (@pdslly) on CodePen.

mask实现百叶窗交错效果


关于作者
admin
admin
admin@ifront.net
 获得点赞 173
 文章阅读量 172008
文章标签