css
关注
分享
扫一扫
九段刀客
你期待的并且相信的，终将实现！
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css变量
:root{ --primary-color: red; } .box{ color: var(--primary-color) }原创 2021-11-30 22:35:15 · 104 阅读 · 0 评论 -
css实现带边框，半透明气泡定位浮层效果
这里的气泡是用来做图片的浮层提示，所以定位点是在最下方，使用transform: translateY(calc(-100% - 13px)) translateX(-20px);将内容区域放在定位点上方。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-.原创 2021-09-28 10:33:16 · 1113 阅读 · 0 评论 -
css 模糊
filter: blur(6px) 会对元素整体进行模糊，文字也会模糊 backdrop-filter:blur(300px) 只会模糊背景，可以实现毛玻璃效果原创 2021-09-27 09:55:06 · 225 阅读 · 0 评论 -
用css媒体查询解决position:fixed H5键盘遮挡问题
@media screen and (max-height: 500px) { .confirm { display: none; } }原创 2021-09-13 23:43:31 · 287 阅读 · 0 评论 -
用div实现类似视频的全屏铺满功能
.full{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 100; }原创 2019-12-09 17:29:25 · 430 阅读 · 0 评论 -
css布局Grid
实现一个九宫格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: bo...原创 2019-12-07 23:01:16 · 211 阅读 · 0 评论 -
纯css实现移动端rem自动计算
换算比例100比1 100px === 1rem <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" ...原创 2019-10-10 09:22:49 · 404 阅读 · 0 评论 -
css的calc计算高度
实现效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ wi...原创 2019-07-31 16:12:10 · 6305 阅读 · 0 评论 -
实现css水平垂直居中的8种方法
总结常用的css水平垂直居中的方法，一共7种。 HTML部分代码 <div style="width:300px;height:300px;" class="wrap"> <div style="width:100px;height:100px;" class="box"></div> </div> 1、最优雅的方法flex .wrap{ ...原创 2019-07-03 23:21:24 · 278 阅读 · 0 评论