![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
文章平均质量分 62
一只不太聪明的燕子
You are unique and nothing can replace you.
展开
-
css drop-shadow给元素或图片非透明区域添加投影
* 阴影作用于整张图片外轮廓 *//* 阴影作用于图片不透明内容 *//* 阴影作用于整个形状外轮廓 *//* 阴影作用于形状不透明内容 */原创 2023-02-16 13:48:58 · 523 阅读 · 0 评论 -
px rem em vh vw的区别
绝对长度pxpx是像素值,是一个固定的长度,比如我们的米,厘米一样。相对长度为什么我们需要相对长度rem em等?🤔固定长度已经不能满足我们现在的需求了。🌰举例:比如我们在缩小我们屏幕的时候,我们不仅仅是需要缩小我们的盒子的宽高,我们还想要让我们字体大小也随之缩小,这样用户体验会更好一点。remrem 与 px 的计算关系rem的值是px的倍数默认情况下font-size = 16px,那么1rem = 16pxrem 如何修改与px的相对计算关系我们可以在并且只能在html标签(因原创 2022-04-12 09:57:38 · 392 阅读 · 0 评论 -
CSS实现子元素在父元素中水平垂直居中的方法总结
运行效果HTML结构<div class="container"> <div class="content"></div></div>实现方式1. 绝对定位 + margin:auto思路:绝对定位使子元素脱离文档流,再将各方向定位值设置为0,由margin自动分配剩余空间,从而实现元素的水平垂直居中.container { width: 200px; height: 200px;原创 2021-10-12 14:04:49 · 799 阅读 · 0 评论 -
通用的功能性CSS代码总结
1.清除浮动/* 万能清除法 */ .clearfix:after { // 此处的clearfix是浮动元素的父元素 content: ""; height: 0; clear: both; display: block; overflow: hidden; visibility: hidden; }2.单行文本溢出显示省略号.content { width:原创 2021-10-20 14:35:26 · 82 阅读 · 0 评论 -
原生JS实现淡入淡出轮播图
不依赖任何插件效果:源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>淡入淡出轮播图</title> <style> *{原创 2021-01-19 11:15:56 · 283 阅读 · 3 评论 -
formData实现文件上传
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input typ原创 2020-09-29 22:36:32 · 383 阅读 · 0 评论 -
原生JS实现放大镜效果
效果:源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{原创 2020-07-19 22:39:03 · 229 阅读 · 0 评论 -
html+css 静态表单实例
1.效果2.html+css代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...原创 2020-03-29 16:18:10 · 776 阅读 · 0 评论 -
column多列布局
CSS3 新增多列布局适合排版很长的文字内容,让其多列显示。使开发者能够轻松实现报纸版式的布局。colum的相关属性:属性说明column-count属性值是一个数字,规定元素被分为几列column-width列宽column-gap列与列的间隔宽度column-rule列的间隔线,column-rule-color、column-rule-sty...原创 2020-03-22 23:11:31 · 381 阅读 · 0 评论 -
JavaScript实现简单的进度条效果
效果图:简单说一下思路:主要就是进度条的宽度的动态调整!要用到JS的间隔定时器 setInterval( )setInterval( )功能:每隔指定时间调用一次函数参数:函数,时间间隔返回值:定时器编号(数字)想让它到一定的宽度就停止,那么需要设定它的最大宽度,在它外面套一个有宽度的元素就可以啦!这样的话控制它在父元素里的百分比就行了。在函数里进行判断是否道达指定宽度,没有...原创 2020-03-22 23:01:02 · 1438 阅读 · 3 评论 -
Web前端学习—如何在网页中插入字体图标详细步骤
iconfont阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。原创 2020-02-29 16:04:16 · 6660 阅读 · 1 评论 -
Web前端学习记录——CSS3过渡属性+定位实现简单的动画效果
css3过渡属性:属性描述transition-property检索或设置对象中的参与过渡的属性transition-duration检索或设置对象过渡的持续时间transition-delay检索或设置对象延迟过渡的时间transition-timing-function检索或设置对象中过渡的动画类型简写方法: transition:...原创 2020-02-22 16:05:15 · 1132 阅读 · 0 评论