css
关注
分享
扫一扫
UzumakiHan
这个作者很懒，什么都没留下…
展开
-
css滚动条样式修改
/*滚动条样式*/*::-webkit-scrollbar { /*滚动条整体样式*/ width:4px; /*高宽分别对应横竖滚动条的尺寸*/ height:4px;}*::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius:5px; -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.15); background:rgba(0,0,0,0.15);}*::-we.原创 2020-06-11 10:37:55 · 169 阅读 · 0 评论 -
修改input placeholder样式
本文介绍了如何修改input placeholder默认的样式有时需要修改placeholder的文字颜色，需要用使用 input::-webkit-input-placeholder 选中，然后进行样式设置以下是多端兼容的写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi原创 2020-06-11 09:37:56 · 825 阅读 · 0 评论 -
grid布局+JS实现电脑虚拟键盘的操作
需求：1.当输入框光标聚焦时，电脑虚拟键盘弹出2.在输入框输入内容时，键盘跟着变化具体实现代码如下：Html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e原创 2020-06-02 16:20:37 · 1013 阅读 · 0 评论 -
grid布局+JS实现电脑虚拟键盘打字测试
这篇blog主要是结合前面两个知识点。实现的效果如下：具体代码如下：Html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati原创 2020-06-02 16:45:04 · 485 阅读 · 0 评论 -
checkbox实现开关按钮
效果：关闭时：打开时：html部分： <div class='search_checkbox'> <input type='checkbox' id='switch'> <label for='switch'></label> </div>css部分 .search_checkbox { margin: 0; padding: 0;原创 2020-06-24 09:09:21 · 1277 阅读 · 1 评论 -
CSS跨不同浏览器透明度opacity设置
.transparent { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */}原创 2020-06-18 13:20:07 · 217 阅读 · 0 评论 -
CSS文本强制换行兼容
pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explo原创 2020-06-18 13:34:07 · 435 阅读 · 0 评论 -
CSS通用媒体查询
/* Smartphones (portrait and landscape) ----------- */@media only screenand (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */}/* Smartphones (landscape) ----------- */@media only screen and (min-width : 321px) { /* Styles */原创 2020-06-18 13:25:05 · 334 阅读 · 0 评论 -
纯css实现loading加载动画
下面就来介绍简单的纯CSS动画加载<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-06-11 11:03:59 · 433 阅读 · 0 评论 -
css实现渐变边框
效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .原创 2021-11-11 11:17:22 · 347 阅读 · 0 评论 -
css全局变量的设置
在css中设置一个主题颜色:root{ /* 主题颜色 */ --ThemeColor: #CEB88D;}使用：color:var(--ThemeColor)在JS中获取css中设置的全局主题颜色//主题颜色 var themeColor = getComputedStyle(document.documentElement).getPropertyValue('--ThemeColor');改变主题颜色document.documentElement.sty原创 2021-01-06 09:45:34 · 1067 阅读 · 0 评论 -
CSS如何实现字体小于12px的效果
1、移动端.font{ // 10px / 12px = 0.83 ransform: scale(0.83);}2、PC端避免不支持 CSS3 浏览器的情况，我们也可以通过降级处理，将字体变回12px；最后兼容 IE：*font-size:10px;.font{ font-size: 12px; transform: scale(0.83,0.83) ; *font-size: 10px;}...原创 2020-07-21 08:56:49 · 798 阅读 · 0 评论 -
css文本超出两行省略显示
#text{text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}原创 2020-07-15 17:23:25 · 184 阅读 · 0 评论