文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

这些CSS提效技巧,你需要知道!

2024-12-02 02:57

关注

修改 media defaults

编写css重置时,添加这些属性以改善媒体默认值。

img, picture, video, svg {
max-width: 100%;
object-fit: contain;
}

column count

使用列属性为文本元素制作漂亮的列布局。

p{
column-count: 3;
column-gap: 5rem;
column-rule: 1px solid salmon;
}

使用 position 居中元素

div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

逗号分隔的列表

li:not(:last-child)::after{
content: ',';
}

平滑的滚动

 html {
scroll-behavior: smooth;
}

hyphens

hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符,也可以控制浏览器什么时候使用,或者让浏览器决定什么时候使用。

first letter

避免不必要的 span ,并使用伪元素来设计你的内容,同样第一个字母的伪元素,我们还有第一行的伪元素。

h1::first-letter{
color:#ff8A00;
}

accent-color

accent-color 属性能够使用自定义颜色值重新着色浏览器默认样式提供的表单控件的强调颜色。

Image filled text

h1{
background-image: url('illustration.webp');
background-clip: text;
color: transparent;
}

placeholder 伪元素

使用 placeholder 伪元素来改变 placeholder 样式:

input::placeholder{
font-size:1.5em;
letter-spacing:2px;
color:green;
text-shadow:1px 1px 1px black;
}

colors 动画

使用颜色旋转滤镜改变元素颜色。

button{
animation: colors 1s linear infinite;
}

@keyframes colors {
0%{
filter: hue-rotate(0deg);
}
100%{
filter: hue-rotate(360deg);
}
}

clamp() 函数

clamp() 函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。

h1{
font-size: clamp(5.25rem,8vw,8rem);
}

selection 伪类

设置选中元素的样式。

::selection{
color:coral;
}

decimal leading zero

将列表样式类型设置为十进制前导零。

li{
list-style-type:decimal-leading-zero;
}

自定义光标

html{
cursor:url('no.png'), auto;
}

caret-color

caret-color 属性用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

only-child

CSS伪类 :only-child 匹配没有任何兄弟元素的元素。等效的选择器还可以写成 :first-child:last-child 或者 :nth-child(1):nth-last-child(1) ,当然,前者的权重会低一点.

使用 grid 居中元素

.parent{
display: grid;
place-items: center;
}

text-indent

text-indent 属性能定义一个块元素首行文本内容之前的缩进量。

p{
text-indent:5.275rem;
}

list style type

CSS 属性 list-style-type 可以设置列表元素的 marker(比如圆点、符号、或者自定义计数器样式)。

li{
list-style-type:'🟧';
}

作者:knaagar 译者:前端小智 来源:dev 原文:https://dev.to/devsyedmohsin/css-tips-ad-tricks-you-will-add-to-cart-163p

来源:大迁世界内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯