![](https://img-blog.csdnimg.cn/20200604082300243.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
Silencer_1
这个作者很懒,什么都没留下…
展开
-
CSS奇怪但偶尔实用的技巧
伪元素获取自定义的标签属性你是否还在为伪元素content内容发愁呢?,试试 content:attr(data); 吧…nth-of-type选中指定范围的元素:nth-of-type(2n) 等同于 :nth-child(odd):nth-of-type(2n+1) 等同于 :nth-child(even)文字两端对齐text-align-last: justify; 等同于 justify-content: space-between;:not()排除一些没必要的元素,原创 2020-07-14 16:52:21 · 11618 阅读 · 0 评论 -
CSS3 的动画应用
写这玩意的目的需要强调的一些文字,比如提示多个账户的用户登录的是哪一个如果是每次一个提示框出来,用户不觉得这个提示框新鲜了之后,自然就会忽略掉如果是加粗加大斜体字,啊,没也用,用户也会习惯最好的方法就是在简洁干净的页面加上类似 澳门赌场开业啦 的那种效果,保证抓眼球,永不过时,就是去财务报道的时候记得注释掉思路以下代码都是在 chrome 中调试的利用 CSS3 的动画红底蓝字?蓝底红字?既然要追求 刺激 闪瞎狗眼,那就贯彻到底咯demo1先来个简单的 红底蓝字/蓝底红字 切换原创 2020-06-23 10:00:05 · 12114 阅读 · 0 评论 -
CSS中的filter
2020的清明节,哀悼一天,网站和app基本都是用的这个属性变黑白的blur(px) 高斯模糊,值越大越糊brightness(%) 明暗度contrast(%) 对比度drop-shadow(h-shadow v-shadow blur spread color) 阴影效果grayscale(%) 灰度hue-rotate(deg) 色相旋转invert(%) 反转输入图像opacity(%) 透明度saturate(%) 饱和度sepia(%) 转换为深褐色...原创 2020-06-04 10:28:11 · 11905 阅读 · 0 评论 -
CSS粘性定位(sticky)
原理元素先按照普通文档流定位,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。(relative)元素定位在跨越特定阈值后为固定定位。(fixed)失效的情况没有top, right, bottom 或 left 之一(这不是废话吗…)浏览器兼容(看控制台)父元素的overflow属性值为:hidden / auto / scrollbody的height:100%...原创 2020-06-04 10:26:24 · 12376 阅读 · 0 评论 -
CSS计数器的应用(无demo)
counter-reset: 创建或者重置计数器counter-increment: 递增变量counter() / counters(): 将计数器的值添加到元素第一个参数接受一个计数器,第二个参数作为分割的字符串,返回字符串,一般写在 content 属性后面...原创 2020-06-04 10:25:16 · 11824 阅读 · 0 评论 -
CSS滚动条美化(没写样式demo)
滚动条太丑?直接打死UI就好啦…::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滑块::-webkit-scrollbar-track 轨道::-webkit-scrollbar-button 两端按钮::-webkit-scrollbar-track-piece 内层轨道::-webkit-scrollbar-corner 边角,两个滚动条的交汇处::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大.原创 2020-06-04 10:22:28 · 11928 阅读 · 0 评论 -
CSS3动画 文档
定义一个动画@keyframes animationname { keyframes-selector {css-styles;}}值说明animationname动画名称keyframes-selector0-100%;from (和0%相同);to (和100%相同)css-styles一个或多个合法的CSS样式属性在某个元素上使用动画animation: name duration timing-function delay iteration-原创 2020-06-04 10:21:02 · 11998 阅读 · 0 评论 -
CSS进阶文档(其实是基础啦)
选择器伪类选择器:hover:visited::selection:first-child:last-child:first-of-type:last-of-type:nth-of-type(n):nth-of-last-type(n):first-line:first-letter伪元素选择器:after:before属性选择器: input[type=“text”]组合选择器E,F/E F(后代选择器)/E>F(子元素选择器)/E+F(直接相原创 2020-06-04 10:19:18 · 11901 阅读 · 0 评论 -
前端壁咚!FLEX文档
容器的属性flex-direction主轴的方向row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。flex-wrap如果一条轴线排不下,如何换行nowrap(默认):不换行。wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。flex-flowflex-direction和flex-原创 2020-06-04 08:26:11 · 11937 阅读 · 0 评论 -
前段壁咚!浏览器的渲染机制之CSS
HTML Parser 生成的 DOM 树其二,CSS Parser 生成的 Style RulesWebkit CSS 解析器通过调用 CSSStyleSheet 的 parseString 函数,将上述 CSS 解析过程启动,解析完一遍后,把 Rule 都存储在对应的 CSSStyleSheet 对象中目前规则依然是不易于处理的,还需要将之转换成 CSSRuleSet 。也就是将所有的纯样式规则存储在对应的集合当中,这种集合的抽象就是 CSSRuleSetCSSRuleSet 提供了一.原创 2020-06-04 08:24:54 · 11861 阅读 · 0 评论