css
文章平均质量分 54
小茄子Seven
to be a better developer
展开
-
纯css实现虚点线渐变效果
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/实现思路:渐变背景色+与背景色相同的边框虚点线+background-origin设置背景图定位效果图:代码:<!--虚点线元素容器-->body { background-color: #636465; position: relative; height: 100vh;}.demo { width: 200px; height:.原创 2022-01-25 14:15:14 · 2476 阅读 · 0 评论 -
分享一个类优惠券样式-带内圆角,带阴影
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/在前端日常开发排版布局过程中,虽然万物都可切图搞定,但是难免会不太灵活,所以针对一些不太常见的设计样式,如下图这种类似优惠券的一种样式,如果能有方式在代码层面搞定,尽量还是不要选择切图了。乍一看感觉也没什么难度,仔细一看,才发现事情并不简单。通常想要实现这种内圆角的效果,首先想到的就是使用背景渐变来实现,但这边比较麻烦的点在于,不规则的内圆角下面的阴影。进过一番尝试,最终使用drop-shad.原创 2021-05-20 17:43:42 · 309 阅读 · 1 评论 -
CSS实现固定宽高比响应式布局(附实例分析)
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/在日常开发过程中,有一些前端业务场景可能需要让元素在尺寸变化的同时,保证宽高比不变,所以在此记录一下具体的实现方法和应用场景。一、如何实现其实关于实现元素的固定宽高比,思路很简单,就是在于找到设置宽高的一个固定基准。关于这个基准是什么,我们其实可以很容易的找到。其实,最先能够联想到的是图片元素它本身的等比缩放特性,通过固定一边,讲另一边设置为auto,就能轻易的实现,但是这种方式有很多局限性,运.原创 2020-06-30 16:44:17 · 2841 阅读 · 0 评论 -
CSS的过渡效果及动画效果:transition&animation
最近做了一个全屏分页滚动效果的页面,其中运用到一些关于动画的元素。其实之前对于 .transition 、 .animation 、 .transform 就总是有点混淆,也花过一段时间来研究他们之间具体的区别,但是时隔已久,这次用的时候发现还是有很多属性不了解,因此决定整理一篇关于动画和过渡的文章。.transition 、 .animation 、 .transform 我的理解分别是:过原创 2015-09-22 14:11:39 · 5411 阅读 · 0 评论 -
关于css的书写顺序
在书写css样式时经常随性地想到哪写到哪,这样不仅不符合书写规范,而且会影响代码的阅读体验。因此在书写css样式属性时应当遵循以下规范:1.位置属性:包括position、top、right、z-index、display、float等2.大小属性:包括width、height、margin、padding等3.文字属性:包括font、line-height、letter-spacei原创 2015-11-02 09:54:49 · 681 阅读 · 0 评论 -
元素的水平及垂直居中实现方法二三
元素的水平及垂直居中实现方法二三最近面试被问到这个问题,其实平时在开发的时候都会习惯性的用一种方法,能实现就行。 虽然问题很基础,但是在面试的时候遇到这种问题,估计就是在考你基础知识掌握的全面性了,因此做一个整理,把能实现的方法都列一遍,也是对自己的css知识做一个复习一、水平居中水平居中相对是开发中最常用的,也是相对比较容易实现的一种布局方式了1.行内元素对父元素添加如下样式,便可实现内部行内元原创 2017-08-08 15:14:58 · 661 阅读 · 0 评论 -
纯干货~常用布局汇总(持续更新)
文本溢出省略号单行省略.div{ //... overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}多行省略.div{ //... overflow: hidden; text-overflow: ellipsis; display:...原创 2018-06-20 18:39:10 · 327 阅读 · 0 评论 -
页面平滑滚动:scroll-behavior&scrollIntoView
从前我们在网页中会需要内容定位,或者返回顶部之类的功能,通常使用锚点来实现,但是页面跳转太过生硬,用户体验不够,于是会通过一大串的js来实现平滑滚动的效果,近两年出现了一些新的属性可以很方便的完成这种交互,很大程度的减小了开发难度。一、CSS:scroll-behavior约莫是去年开始出现的这个属性,只需要在需要滚动的地方增加一行如下属性,即可。scroll-behavior:smooth...原创 2018-11-07 09:29:45 · 5211 阅读 · 2 评论