![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
吃葡萄不吐葡萄皮嘻嘻
。
展开
-
CSS ::file-selector-button伪元素修改input上传文件按钮的样式
* 修改按钮后的文字颜色 *//* 隐藏按钮后的文字 */原创 2023-07-18 17:10:11 · 1644 阅读 · 0 评论 -
CSS实现底部弧度效果
伪类设置content:‘’,并相对定位为absolute,通过设置left ,top 值,改变width和和left来调节弧度。使用伪类处理,先将元素自身定位为relative;/* 将left设为(100%-宽度)/ 2 */原创 2023-07-11 17:23:55 · 1678 阅读 · 0 评论 -
SVG图标描边
需求:实现移入svg图标实现描边效果重点css代码如下:以下属性及属性值参考链接效果图如下:原创 2023-06-05 10:38:30 · 207 阅读 · 0 评论 -
下载网站字体图标全网最详细教程
下载网站字体图标原创 2023-02-03 16:33:32 · 1192 阅读 · 0 评论 -
关于单行文本设置text-align:justify无效的解决方法
1、需要使用after,将伪元素放在需要两端对齐的元素后面,作为第二行; 2、设定after的width为100%,生成第二行; 3、设置为行内块元素,设置的width才有效。原创 2023-01-06 10:28:52 · 2184 阅读 · 0 评论 -
纯css实现爱心
【代码】纯css实现爱心。原创 2022-10-21 10:52:52 · 236 阅读 · 1 评论 -
css+jq实现简单万花筒滚动效果
css + jq 实现万花筒滚动效果原创 2022-09-14 11:41:24 · 666 阅读 · 0 评论 -
css中使用attr() 展示 tooltip
css中使用attr() 展示 tooltip。原创 2022-08-23 10:30:56 · 157 阅读 · 0 评论 -
纯css制作“破镜重圆”效果
纯css制作“破镜重圆”效果。原创 2022-08-19 10:55:02 · 167 阅读 · 0 评论 -
多行元素实现超出横向滚动
demo如下图:代码如下: <style type="text/css"> *{ margin:0; padding:0; box-sizing: border-box; } #outbox{ width:100%; overflow: auto; height:400px; /* padding:0 10px; */ margin: 0 auto; } #box{ hei原创 2022-03-29 13:56:58 · 337 阅读 · 0 评论 -
单行元素实现横向滚动
显示滚动条:不显示滚动条:直接上代码<style type="text/css"> body { width: 100%; } * { margin: 0; padding: 0 } #outBox { padding: 10px; } #inner_box { white-space: nowrap; overflow-x: scroll; overflow-y: hidden; } .item {原创 2022-03-29 10:38:35 · 508 阅读 · 0 评论 -
回流和重绘的区别
什么是回流?当一个元素自身的宽高,布局,显示或隐藏,或元素内部的文字结构发生变化,导致需要重新构建页面的时候,就产生了回流。什么是重绘?当一个元素自身的宽高,布局,及显示或隐藏没有改变,而只是改变了元素的外观风格的时候,就产生了重绘。(只改变自身样式,不会影响到其他元素)什么时候会进行回流?1、添加或者删除可见的 DOM 元素;2、元素的位置发生改变;3、元素的尺寸发生改变;4、内容改变;5、页面第一次渲染的时候;什么时候会进行重绘?只改变自身样式,不会影响到其他元素;CSS 样式改原创 2022-03-22 17:27:07 · 349 阅读 · 0 评论 -
CSS权重理解
CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。权重的等级1、!important,加在样式属性值后,权重值为 100002、内联样式,如:style="",权重值为10003、ID选择器,如:#content,权重值为1004、类,伪类和属性选择器,如: content、:hover 权重值为105、标签选择器和伪元素选择器,如:div、p、:before 权重值为16、通用选择器(*)、子选择器(>原创 2022-03-22 17:12:09 · 256 阅读 · 0 评论 -
两个同级的相邻元素之间,有看不见的空白间隔,是什么原因引起的?有什么解决办法?
行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。解决方法:1、相邻元素代码代码全部写在一排2、浮动元素,float:left;3、在父级元素中用font-size:0;...原创 2022-01-13 14:37:26 · 421 阅读 · 0 评论 -
CSS之object-fit 属性
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。原创 2022-01-01 22:12:03 · 463 阅读 · 0 评论 -
简洁高效的rem适配方案flexible.js
flexible.js的原理是把当前设备划分为10等份,在不同设备下,比例还是一致的,我们要做的是确定好我们当前设备的html文字大小就行了比如:当前设计稿是750px,那么我们只需要把html文字大小设置为75px(750px/10)就可以页面元素的rem值:当前元素的px/75✨✨✨使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题✨✨✨1.先在gitHub上面下载并在页面中引入flexible.js2.写less样式dem如下图:...原创 2021-12-28 17:03:11 · 370 阅读 · 2 评论 -
移动web实现响应式布局(rem)
rem单位:rem(root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如:根元素(html)设置font-size = 12px;非根元素设置width:2rem;则换算成px表示24px。媒体查询使用@media查询,可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器的大小过程中,页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多的苹果手机,安卓手机,平板灯设备都用原创 2021-12-28 15:28:31 · 278 阅读 · 0 评论 -
less变量进行除法运算,编译css转换失败的原因
less除法运算编译成css失败原创 2021-12-28 14:22:30 · 380 阅读 · 0 评论 -
全网 灰色主题实现原理
把网站做成一个纯灰色主题,最简单直接的办法就是给整个网站加一个滤镜效果图如下:css中有以下几种滤镜:做灰色主题的网页,我们要选择灰度grayscale这个滤镜。属性写法:filter: grayscale();网站要做纯灰色,也就是灰得最彻底,所以选择100%。filter: grayscale(100%); -webkit-filter: grayscale(100%); //兼容chrome和safari-moz-filter: grayscale(100%原创 2021-12-23 17:24:54 · 587 阅读 · 0 评论 -
看这篇就懂了height:100%和height:100vh的区别
vh (视口高度)和 vw(视口宽度)的区别vh 就是当前屏幕可见高度的1%height:100vh == height:100%效果:当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,但是设置height:100vh,该元素会被撑开屏幕高度一致。vh: 相对于视窗的高度, 视窗被均分为100单位的vhvw: 相对于视窗的宽度, 视窗被均分为100单位的vw...原创 2021-12-02 17:54:15 · 545 阅读 · 0 评论 -
CSS实现中英文混合打字效果实现
效果图如下: <style> .typing { color: plum; font-size: 24px; width: 18.5em; height: 1.25em; border-right: 1px solid transparent; animation: typing 3.5s steps(37, end), blink-原创 2021-12-02 10:31:12 · 632 阅读 · 0 评论 -
纯CSS实现打字动画效果
效果图如下: <style> .typing { color: rgb(250, 77, 106); width: 16em; white-space: nowrap; border-right: 2px solid transparent; animation: typing 3.5s steps(16, end), blink-caret原创 2021-12-02 10:25:18 · 500 阅读 · 0 评论 -
css实现酷炫样式
<style> .bubbly-button { font-family: "Helvetica", "Arial", sans-serif; display: block; width: 300px; height: 70px; font-size: 20px; line-height: 70px; -webk.原创 2021-11-29 17:21:41 · 314 阅读 · 0 评论 -
CSS你不知道的样式属性 @counter-style
效果图如下:@counter-style 基本语法如下:@counter-style 任意自定义名称 { /* 具体的规则细节 */ }小样代码: <style> @counter-style smile { system: cyclic; symbols: ????; suffix: " "; } .cyclic-smile {原创 2021-11-29 14:58:11 · 499 阅读 · 0 评论 -
:placeholder-shown和:not()
<input type="text" placeholder="placeholder"> input{ outline: none; border: 2px solid #000000; padding: 10px 0; text-indent: 10px; font-size: 20px; } input::placeholder { .原创 2021-11-24 17:41:46 · 265 阅读 · 0 评论 -
css实现文字渐变效果
重要属性:-webkit-background-clip: text;使用了这个属性的意思是,以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。用渐变背景作为颜色填充文本text-fill-color;文本填充颜色,不过它实际也是设置对象中文字的填充颜色,和color的效果很相似。如果同时设置text-fill-color和color两个属性,text-fill-color会覆盖掉color的值。 <style> .textGradient原创 2021-09-01 11:02:41 · 892 阅读 · 0 评论 -
css实现移入样式十一
效果图如下: <style> .right { position: fixed; right: 0; bottom: 50%; width: 45px; height: 45px; text-align: center; cursor: pointer; color: #fff; }原创 2021-08-13 16:20:54 · 89 阅读 · 0 评论 -
标题样式一
<style> h1 { width: 500px; margin: 100px auto; border-bottom: 2px solid #3AA27F; text-align: center; height: 40px; color: #3AA27F; } h1 span { ..原创 2021-08-13 15:34:30 · 74 阅读 · 0 评论 -
导航栏样式二
效果图如下: <style> /* 导航栏样式 */ .nav_title{ width: 1200px; margin: 100px auto; } .clearfix::after{ content: ""; display: block; height: 0; clear: both; visibility: hidden原创 2021-08-13 11:54:59 · 72 阅读 · 0 评论 -
导航栏样式一
效果图如下:<style> * { margin: 0; padding: 0; list-style: none; text-decoration: none; } .box { position: relative; width: 373px; margin:100px;原创 2021-08-13 11:37:07 · 128 阅读 · 0 评论 -
word-break属性
语法:word-break:normal | break-all | keep-all;normal:使用浏览器默认的换行规则;break-all:允许在单词内换行;keep-all:只能在半角空格或连字符(只指中划线,不包括上划线和下划线,中英文状态下的都可以)出换行;...原创 2021-08-12 17:21:07 · 3284 阅读 · 0 评论 -
table常用的几个重要属性
效果图如下;border 规定表格边框的宽度cellpadding 规定单元边沿与其内容之间的空白cellspacing 规定单元格之间的空白width 规定表格的宽度border-collapse: collapse; 为表格设置合并边框模型 默认值为separaterowspan跨行合并单元格colspan跨列合并单元格 <style> table{ border-collapse: collapse; /* 为表格设置合并边原创 2021-08-11 11:11:00 · 2835 阅读 · 0 评论 -
visibility,display,opacity的区别?
相同点:visibility和display都能实现元素的显示和隐藏display: none; 隐藏元素display: block; 显示元素display: inline; 元素转换为行内元素display: inline-block; 元素转换为行内块元素visibility:hidden; 隐藏元素visibility: visible;显示元素opacity: 0是视觉上消失了,透明度为0,在文档流中站位,浏览器会解析区别:1.性能比较使用visibility:hid原创 2021-08-11 09:56:08 · 3437 阅读 · 2 评论 -
jq实现瀑布流
效果图如下: <style> * { margin: 0; padding: 0; } .box { width: 100%; position: relative; } .item { position: absolute; } .item img原创 2021-07-20 14:39:30 · 130 阅读 · 0 评论 -
Swiper的基本使用——修改滚动条的样式
效果图如下:Swiper基本使用方法参考官网链接<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-s原创 2021-07-20 14:10:08 · 2437 阅读 · 2 评论 -
css实现移入样式十
<div> 立即预约 </div> <style> div{ cursor: pointer; width: 180px; height: 35px; line-height: 35px; text-align: center; display: block; ...原创 2021-07-16 15:53:53 · 193 阅读 · 0 评论 -
animation实现图片翻转
移入翻转:代码如下: <style> div { position: relative; margin: 100px auto; width: 100px; height: 100px; overflow: hidden; border: 1px solid #ccc; } div img {原创 2021-06-28 10:43:57 · 440 阅读 · 0 评论 -
纯CSS实现三角形
<style>.sjx{ display: inline-block; border-bottom:20px solid transparent; border-left: 20px solid transparent; border-top:20px solid pink; border-right: 20px solid pink; } </style><div class="sj.原创 2021-06-21 13:48:36 · 115 阅读 · 0 评论 -
修改滚动条的默认样式
效果图如下:代码如下: <style> *{ margin:0; padding: 0; list-style: none; box-sizing: border-box; } .outbox{ margin: 100px; width: 280px; } .head原创 2021-06-16 17:43:42 · 160 阅读 · 0 评论 -
css外边距合并和外边距塌陷问题的解决方法
外边距合并图如下:外边距合解决方法:只需给其中一个div设置margin值即可解决; <style> .box1, .box2 { width: 200px; height: 200px; } .box1 { background: turquoise; margin-bottom: 20px; } .bo原创 2021-05-21 11:58:08 · 114 阅读 · 0 评论