css
yww_yang
这个作者很懒,什么都没留下…
展开
-
js RGB 转换为 HEX
项目中碰到需要将rgb 转换为hex,找到方法是将rgb 每个数字由10进制转换为16进制 const rgbToHex = (r, g, b) => { const toHex = num => { const hex = num.toString(16); return hex.lenght === 1 ? `0${hex}` : hex; }; return `#${toHex(r)}${toHex(g)}${toHex(b)}`;原创 2022-05-06 14:24:21 · 726 阅读 · 0 评论 -
vue 封装滚动数字组件
该组件包含正整数及浮点型小数 父组件引用 <roll-number :font-size="16" :num="num"></roll-number> <script> setInterval(() => { this.num = Math.random() * (10000 + 1); }, 3000); </script> rollNumber.vue 数字滚动组件 html <template> <div原创 2021-07-22 15:04:29 · 347 阅读 · 0 评论 -
css3 圆形轨迹动画
css3圆形轨迹动画 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> css3圆形轨迹动画 </title> <style type="text/css"> @keyframes animX{ 0% {left: 0px;} 100% {left:原创 2020-09-25 14:02:31 · 815 阅读 · 0 评论 -
css 隐藏滚动条或更改滚动条样式
css 隐藏滚动条或更改滚动条样式 /*css主要部分的样式*//*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ body::-webkit-scrollbar { width: 10px; /*对垂直流动条有效*/ height: 10px; /*对水平流动条有效*/ } /*定义滚动条的轨道颜色、内阴影及圆角*/ body::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)原创 2020-09-25 11:57:28 · 747 阅读 · 0 评论 -
input 的 placeholder 的字体样式
input 的 placeholder 的字体样式 input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red; } input::-moz-placeholder { /* Firefox 19+ */ color: red; } input:-ms-input-placeholder { /* IE 10+ */ color: red; } input:-moz-placeholder { /* Firefox 1原创 2020-09-25 11:55:31 · 154 阅读 · 0 评论 -
css 背景图 适应
css 背景图 适应 CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 <div class="bg"> <img src="../../assets/images/headImg.jpg" alt=""> </div> .bg { background-color: seagreen; height: 200px; width: 100px; } img { height: 100%; wi原创 2020-09-25 11:53:09 · 292 阅读 · 0 评论 -
css 文字溢出省略号
css 文字溢出省略号 单行 .row { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 多行 .rows{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /*3行*/ overflow: hidden; }原创 2020-09-25 11:27:43 · 71 阅读 · 0 评论