css3
文章平均质量分 51
css 的开发小技巧
厚渡
厚积薄发 渡人渡己
展开
-
设置滚动条默认样式 谷歌浏览器
滚动条的默认样式是比较丑的,一般我们会重新设置下。原创 2022-06-22 14:31:10 · 1407 阅读 · 0 评论 -
使用js写CSS
第一种引入第三方样式。原创 2022-07-16 14:22:22 · 1077 阅读 · 0 评论 -
flex布局 flex全解 flex
一、Flex布局是什么?Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex;}行内元素也可以使用Flex布局。.box{ display: inline-flex;}Webkit内核的浏览器,必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex;}注转载 2021-04-30 19:54:09 · 6445 阅读 · 1 评论 -
css取消双击选中文字
如何让用户不能选中文字呢?还有种方法就是在相应的元素上添加 onselectstart=“return false;”div{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10*/ -khtml-user-select:none;/*早期浏览器*/ user-select:none;}注意:如果写在body中原创 2021-04-24 20:47:28 · 5552 阅读 · 0 评论 -
浏览器 滚动条 修改样式隐藏滚动条
处理浏览器默认的滚动条设置滚动条// 设置滚动条 达到出现标准才出现.scroll { height:300px; width:70px; overflow:auto;}// 宽度(width)和高度(height)可以根据实际需要来设定。// 以上实例表示如果 div 内容的高度大于 300px 就会出现垂直滚动条,小于 // 300px 就没有滚动条。如果宽度大于 70px 会出现水平滚动条,小于就没有。// 设置滚动条 一直有.scroll { o原创 2021-03-30 16:45:34 · 5755 阅读 · 0 评论 -
css实现滤镜效果
CSS3 filter(滤镜)在查看vue官网的时候,发现这个效果是 用的css3 filter这个效果还是挺不错的。使用 filter这个使用场景也挺多的,可以对 div , img … 等等标签 进行设置img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%);}值:CSS 语法filter: none | blur() | bright原创 2021-01-29 14:54:03 · 6478 阅读 · 0 评论 -
css实现强制不换行 溢出显示点点点(...)多行溢出显示(...)
介绍1.自动换行:word-wrap:break-word;word-break:normal;2.强制换行:word-break:break-all; 按字符截断换行 /* 支持IE和chrome,FF不支持*/word-wrap:break-word; 按英文单词整体截断换行 /* 以上三个浏览器均支持 */* 注意:单词换行需要父盒子为块级元素3.强制不换行:white-space:nowrap;属性规定当文本溢出包含元素时发生的事情。text-overflow: c原创 2021-01-28 11:14:41 · 11059 阅读 · 0 评论 -
css函数
CSS 函数随手笔记, 我只记录重点的,常用的。css函数有很多。 例如 rgba(), rgb(), hsla(), hsl(), linear-gradient()… 有兴趣自行了解吧attr(); 返回选择元素的属性值。获取父盒子的某一项 元素的值, (上手试试就知道了, 我形容 容易误解)div:after { content: " (" attr(class) ")"; }a:after { content: " (" attr(href) ")"; }c原创 2021-01-15 15:28:58 · 6295 阅读 · 1 评论 -
css3帧动画
css3帧动画前段时间我得到这张图,我就在想 这个不是做css3帧动画的素材吗?想了就开始吧,……好吧我已经做完了想要使用 复制html css就能使用<template> <div class="animation"> <img src="@/assets/love.png" alt=""> </div></template><script>export default { name: "原创 2021-01-13 16:15:28 · 5693 阅读 · 0 评论