分类
排序
写CSS的常用套路(background-clip:text)
能将背景裁剪成文字的前景色,常用来和color: transparent配合生成渐变文本 HTML: <ul> <li><a href='#'>home</a></li> <li><a href='#'>archives</a></li> <li>...
写CSS的常用套路(霓虹文本)
HTML: <div class='neon'>fushigi no monogatari</div> CSS: @import url(https://fonts.googleapis.com/css?family=Pacifico); body { display: flex; height: 100vh; justify-content: ...
写CSS的常用套路(发光文本)
HTML: <h1 class='glowIn'>Hello World</h1> <p class='glowIn'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m...
写CSS的常用套路(box-shadow)
为盒子添加阴影,增加盒子的立体感,可以多层叠加,并且会使阴影更加丝滑 HTML <ul class='pagination'> <li class='page-prev'> <a class='prev' href='#'><svg t='1580195949197'...
写CSS的常用套路(border-radius)
为盒子添加圆角,经常用来美化按钮等组件 如果设定为50%则是圆形,也很常用 不规则的曲边形状 调整多个顶点的border-radius可以做出不规则的曲边形状 HTML <nav class='navtab'> <ul> <...
写CSS的常用套路(兄弟选择符定制表单元素 )
提示:这里最好将input作为label的子元素,这样用户点击label时就能传到input上默认的input太丑怎么办?那就把它先抹掉,用appearance: none或opacity: 0都可以 然后,利用兄弟选择符~来定制和i...
写CSS的常用套路(overflow障眼法)
之前有做过闪光按钮的效果:鼠标悬浮按钮上时一道光从左到右划过去。 笔者就用渐变来模拟那道光,通过transform: translateX()将其平移至右边。 但这样明显不对啊,这光为啥能被看见呢?不应该...
写CSS的常用套路(attr()生成文本内容)
元素可以有自定义的属性值,它的命名格式通常为data-*attr()用于获取元素的这种自定义属性值,并赋值给其伪元素的content作为其生成的内容利用这个函数,我们可以用伪元素在原先文本的基础上“...