Css
css 选择器,样式汇总
最初都是小白
深深的话我们浅浅的说,未来长长的路我们慢慢的走。
展开
-
css引入本地字体包用法
css使用本地字体原创 2022-12-20 14:10:39 · 1075 阅读 · 0 评论 -
css 录音声波动效
想要的效果:类似微信的按住说话功能:HTML<div class="time-box"> <span class="start-taste-line"> <hr class="hr1" /> <hr class="hr2" /> <hr class="hr3" /> <hr class="hr4" /> <hr class="hr5" />原创 2022-03-17 14:27:32 · 4775 阅读 · 0 评论 -
rem用法-两步实现响应式布局
rem 根据根目录字体大小来适应1:设置html字体大小<style> html { font-size: 625%; }</style>2:使用:1rem == 100px<style> div { width:1rem; // 100px height:0.5rem; // 50px }</style>...原创 2022-03-07 19:12:58 · 725 阅读 · 0 评论 -
css 全局滚动条样式美化
css代码 *::-webkit-scrollbar { /*滚动条整体样式*/ width: 6px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } *::-webkit-scrollbar-thumb { /*滚动条里面深色条*/ border-radius: 10px; box-shadow: inset 0 0 5px rgba(236, 236, 236, 0.1); background: #ccc; } *::-webki原创 2022-02-09 11:14:02 · 1138 阅读 · 0 评论 -
CSS新手应该如何入门(推荐)
CSS是一种强大而优美的工具,它的潜力远远超过我们的想象。 大家好,今天给大家带来的是css的知识,近几天我一直再看一本书,名字叫《Eric Meyer 谈 CSS》,按我的理解这本书讲述的是从一开始的没有css的时候到后来怎样一步一步的被广泛使用了...原创 2019-01-25 14:32:09 · 3918 阅读 · 5 评论 -
css3选择器概念及写法大全——结构性伪类选择器
大家好,今天给大家总结一些关于css3中的常用结构性伪类选择器,如果本文档有缺漏或编辑错误的地方还请大家提出,我后续做修改,话不多说咱们开始吧!选择器名称与概念序号选择器名称概念1root匹配文档根元素,在HTML 中,根元素始终是 html 元素。2not匹配非指定元素/选择器的每个元素。3empty匹配没有子元素(包括文本节点)的每个元素。...原创 2019-01-21 15:24:41 · 1032 阅读 · 0 评论 -
video标签自定义宽高
只需给video标签加上object-fit:cover; 即可实现自定义宽高video{ object-fit:cover; }原创 2021-12-23 10:20:34 · 2837 阅读 · 0 评论 -
解决css设置背景图尺寸后,图片模糊
今天在做项目的时候,发现有一张背景图片里面是文字,然后用了background-size:100%; 后,图片模糊了。解决办法:给当前元素css添加以下代码 image-rendering: -webkit-optimize-contrast;原创 2021-12-09 17:23:54 · 3159 阅读 · 0 评论 -
window.print 打印文章时设置字体及解决每页跨页截断问题
最近在用到了打印的功能,然后就出现了一个这样的问题,分页的时候最后一行不会自动换行会直接截断:解决办法: //@media print只有调用打印的时候会生效 @media print { // 设置文章标题字体 .article_content { font-size: 20px !important;} .title { font-size: 28px !important; } //解决断行问题 .article_content { -we原创 2021-11-24 15:45:21 · 3805 阅读 · 0 评论 -
css行内元素基线对齐问题:vertical-align属性(定义和用法)
如图中问题:一共有两种办法:第一种:给每个红色盒子加 float: left; 但是会不占位置第二种:给每个红色盒子加 vertical-align:middle; (middle表示把此元素放在父元素的中部)/* 第一种: */.item { float: left; }/* 第二种: */.item { display: inline-block; vert...原创 2019-12-05 14:33:53 · 6494 阅读 · 0 评论 -
hover属性不起作用??css中使用hover属性控制同级元素,只需加个 " + "即可
我们平时处理的基本上都是父子级的元素,下面是同级的用法:当使用hover控制同级元素:鼠标浮上box1时box2 <div class="box1">box1</div> <div class="box2">box2</div>解决办法: .box2 { display: none; } .box1:h...原创 2019-12-05 13:27:10 · 2885 阅读 · 0 评论 -
textarea禁止拉伸和禁止编辑
一、textarea禁止拉伸方法:设置style:“ resize:none;”// 禁止拉伸代码 <textarea style="resize:none;" >自己设置宽高即可</textarea>效果:二、textarea禁止编辑方法:(1)设置模式为只读 :readonly//readonly 可复制不可编辑 <textarea type=...原创 2019-02-20 13:31:42 · 21894 阅读 · 2 评论 -
解决textarea、input等输入框在ios端的阴影问题
共有以下几种:1.textarea 设置 textarea {-webkit-appearance: none;}即可: textarea { -webkit-appearance: none; }2.input 设置 input[type=“text”] {-webkit-appearance: none;}即可: input[type="text"] { -...原创 2019-03-07 09:25:52 · 1795 阅读 · 0 评论 -
p标签单行或多行超出显示省略号
单行省略// 单行显示省略号p { overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}多行省略-webkit-line-clamp: 3; 表示超出3行显示省略号,以此类推// 多行显示省略号,数字3为超出3行显示,p { display: -webkit-box; -webkit-box-ori...原创 2019-03-21 16:54:11 · 13030 阅读 · 0 评论 -
border的属性及写法大全:实线、点线、虚线、双线、混合用法
border的属性及写法:属性含义solid实线dotted点线dashed虚线double双线单项写法及效果演示:(后面有完整代码)1.实线 // 1. 实线:solid .border1{ border: 1px solid #666; }实线效果:2.点线 // 2. 点线:...原创 2019-03-26 13:40:14 · 125715 阅读 · 2 评论 -
如何去掉input标签的默认样式?答案在这里!
只需要设置以下样式,就可以去除input的默认样式 input { background: none; outline: none; border: none; }原创 2019-06-14 13:40:26 · 16898 阅读 · 3 评论 -
input和textarea设置placeholder属性的颜色、字体大小
刚刚拿到一个设计图中的input的placeholder是白色的然后就给大家整理了一下。以下是解决代码:/* WebKit browsers */input::-webkit-input-placeholder { color: #fff; /* 字体大小直接写样式即可 */ font-size: 28px;}/* Mozilla Firefox 4-18使用...原创 2019-06-14 14:03:37 · 14903 阅读 · 0 评论 -
css如何去掉或修改浏览器默认滚动条
去掉浏览器默认滚定条很简单,只需在出现滚动条的元素加-webkit-scrollbar属性即可,代码如下: /* .box为当前出现滚动条的容器 */ .box::-webkit-scrollbar { display: none }...原创 2019-07-25 10:34:12 · 5025 阅读 · 2 评论 -
如何用css样式修改select下拉标签的默认箭头样式
当需求是不让用ui框架,而要手动修改一个select下拉列表的样式时…像这样把图一改成图二:(图一):(图二):代码如下:select { /* 鼠标移上,变小手 */ cursor: pointer; padding: 0 10px; /* 清除默认的箭头样式 */ appearance: none; -moz-appearanc...原创 2019-08-09 17:14:47 · 4793 阅读 · 0 评论 -
calc()函数 css中用100%的宽度/高度,减去50px??
做项目的时候常常用遇到下面这种情况:要让B盒子占满 A盒子剩下的部分也就是黄框区域,这时候我们可以设置 B盒子 高为 100% 或者是100vh减去上面的 A盒子的高度50px。只需设置样式使用calc() 函数,它支持 “+”, “-”, “*”, “/” 运算;注意:运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);任何长度值都可以使用calc...原创 2019-08-27 18:07:40 · 23072 阅读 · 2 评论