![](https://img-blog.csdnimg.cn/20200730113202848.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 67
CSS 的点点滴滴
不二博客
世界巨大,我以渺小来爱他。时间悠长,我以短暂来爱他。
展开
-
功能强大性能更佳的 Sass 常用指令
请使用 @mixin 代替 @extend原创 2022-11-24 22:17:34 · 786 阅读 · 0 评论 -
利用 clip-path 绘制不规则的图形
学会 clip-path 后再也不用求设计师切图了~原创 2022-07-06 09:09:48 · 671 阅读 · 0 评论 -
你可能真的不会用sticky
position: sticky 是开发中相对高频的一个用法,不过在最近的项目中竟然被我玩翻车了,设置了sticky尽然不生效了,于是便想一探究竟。元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top,right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。原创 2021-08-13 15:36:17 · 962 阅读 · 1 评论 -
CSS clip-path 运用
偶然间接触到 clip-path 的 CSS 属性,接的挺有意思,想着记录一下。clip-path 是通过裁剪元素的方式显示裁剪的指定区域。通俗来说就是像剪窗花一样。根据 MDN 官方的实例,裁剪一共有四个属性,他们分别是 inset | circle | ellipse | polygon | pathinset 向内部剪裁circle 按照圆形裁剪ellipse 按照椭圆形剪裁polygon 按照多边形裁剪基于以上的一些用法,我们可以想到 Tips 提示的用法,之前使用的拼接的方法原创 2021-06-18 16:56:29 · 401 阅读 · 1 评论 -
css3 多媒体查询
媒体,一类传输信息的介质。媒体在我们身边息息相关;电视机,手机,电脑等等都是媒体。我们在前端开发的过程中,面对不同的媒体需要去设计不同的样式。@media 多媒体查询我们在不同的媒体上使用不同的样式文件,以便达到不同媒体设备的响应式。@media screen and (max-width: 300px){ body { background-color:blue;...原创 2020-01-09 19:24:27 · 402 阅读 · 0 评论 -
CSS3使用过渡转换和动画实现3D旋转盒子
在网络快速发展的今天,静态web页面早已经不满足人们的需求,因此我们需要更加炫酷的动画渲染页面,使得我们的页面逼格满满,在css3中动画的表现形式有过渡,2d动画和3d动画,给用户一种耳目一新的全新体验。过渡(transition)个人理解的过渡指的是某种元素的某种状态在一定的时间段内发生的变化叫做过渡。div:hover{ width: 200px; height: 200px;}...原创 2020-01-08 19:17:59 · 1242 阅读 · 0 评论 -
CSS3 弹性盒子
CSS3弹性盒子弹性盒子的flex属性自元素的flex属性元素的土地扩张和收缩弹性盒子的flex属性关于盒子,我们都知道是用来存放元素的一种盒子模型,盒子模型又分为W3C盒子模型和IE怪异盒子模型,那么这个弹性盒子flex又是个什么东西呢?弹性盒子就是可以根据盒子 的大小自适应的进行我们想要摆放的一种方式进行展现出来。我们可以将盒子设置为display:flex弹性盒子和inline-f...原创 2019-12-30 21:15:41 · 502 阅读 · 0 评论 -
css3背景background
背景图片(background-image)在css3中背景图片可以放置多张图片,background-image: url(image1.jpg,image2.jpg),中间以都够分隔;而且背景图片默认平铺,图片显示的位置默认从元素的padding开始显示。由图我们可知,我们的图片是从padding的位置开始显示,我们可以通过属性background-origin来改变背景图片显示的位置...原创 2019-12-26 20:53:57 · 397 阅读 · 0 评论 -
css3边框线border
边框(border)在网页中我们最常见的一种css3样式莫过于边框圆角了,边框圆角是的网页整体更加美观,我们当然想要我们的页面更加的美观,所以我们一起来看看这个属性。 border-radius: 5px;我们设置边框圆角值为5px,如上图所示,当然这个只是一个简写的方法 border-radius: 5px 10px;这样的写法就是代表着左上和右下为5px,右上和左下的为10p...原创 2019-12-26 20:25:01 · 2002 阅读 · 0 评论 -
CSS3选择器
css3选择器兄弟选择器(~)属性选择器(E[att])伪类选择器(:)伪对象选择器我们都知道在css中选择器有CLASS选择器,ID选择器,E标签选择器,*通配符,>子代选择器,+兄弟选择器等等,但是这些在实际开的的过程中使用起来还是不够方便,于是在CSS3中增加了很多方便我们使用的选择器。兄弟选择器(~)我们在前面已经有过了一个+兄弟选择器,同样都是兄弟选择器,他们有什么区别呢?...原创 2019-12-25 20:24:23 · 306 阅读 · 0 评论