css
关注
分享
扫一扫
=清风徐来=
广积粮，缓称霸
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css:打造一个故障风格按钮button
故障风格的按钮<!DOCTYPE html><html><head> <title>test</title> <link href="https://fonts.font.im/css?family=Oswald" rel="stylesheet"></head><style type="text/css"> body{ display: flex; justify-content: .原创 2021-01-06 16:59:07 · 433 阅读 · 0 评论 -
一文学会sass常用语法
前言项目一直用的scss,但是一直没有好好学些sass的用法,一直用的只有定义变量和选择器嵌套等寥寥几个功能(捂脸).后来仔细看了一下sass中文网,感觉自己错过了一个世界…用法1.其中一些简单的用法 使用 $定义变量; 选择器嵌套包括使用&表示元素本身;2.一些平时会用到的用法 属性嵌套带有相同前缀的css属性可以用嵌套的规则书写.text-item{ fon...原创 2020-03-16 17:52:03 · 238 阅读 · 0 评论 -
关于css中的will-change属性
https://www.w3cplus.com/css3/introduction-css-will-change-property.html转载 2019-11-11 10:11:12 · 355 阅读 · 0 评论 -
关于text-align中的justify
在很多的业务场景中，我们可能需要达到这样的一个效果也就是将左边的label设定成相同的宽度，并且label内部的文字需要两端对齐，这里需要使用到text-align中的justify。语法使用起来很简单，只要在需要文本两端对齐的标签上加上text-align:justify左边是设定text-align:left，右边是设定了text-align:justify,可以看出，justif...原创 2018-12-03 15:12:41 · 12715 阅读 · 0 评论 -
高效前端:css方面的小技巧
1、使用css绘制一个自定义提示框可以将提示文字放入标签元素的属性中，然后通过伪元素中的content来展示：&lt;div class="container"&gt; &lt;span data-title="this is a tip" class="item"&gt;hover here&lt;/s原创 2018-12-20 15:17:14 · 284 阅读 · 0 评论 -
如何创建0.5px的border
一般设计图是使用iphone6的尺寸进行绘制的（750px），也就是普通的两倍关系，因此设计图中的1px,对应的css就是0.5px，但是如何直接写0.5px，大部分浏览器会将其作为1px进行解析。但是可以使用以下几种方式进行处理1、使用transform：scale(0.5,0.5)的方式借助transform:scale(0.5,0.5)将边框进行缩放一半，自然就形成了0.5px的边框...原创 2018-12-18 10:15:57 · 3644 阅读 · 0 评论 -
css3的border-radius
border语法border-radius支持是四个角，总共八个值（水平+垂直）的设置：border-radius:1px 2px 3px 4px / 5px 6px 7px 8px;表示border-top-left-radius:1px 5px;border-top-right-radius:2px 6px;border-bottom-right-radius:3px 7px;...原创 2018-12-24 12:36:59 · 458 阅读 · 0 评论 -
学习一下CSSModule
什么是cssModule在js中，我们有大量模块化解决方案，比如es6中的export和import导入导出以及commonJS中的require以及module.export都可以实现私有变量以及全局变量。而在css中，为了实现这css的模块化，主要有下面两种方法： css in js。使用js或者json格式来书写样式，并将样式生成inline-style的形式，这种方式无疑可以让css...原创 2019-01-08 18:16:59 · 2043 阅读 · 0 评论 -
BFC详解
什么是BFC块格式上下文（Block Formatting Context）BFC。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。Block-level box：display为block，list-item，table-cell的元素；Inline-level box：display为in...原创 2019-04-17 11:21:47 · 878 阅读 · 0 评论