css
九段刀客
你期待的并且相信的,终将实现!
展开
-
css变量
:root{ --primary-color: red;}.box{ color: var(--primary-color)}原创 2021-11-30 22:35:15 · 76 阅读 · 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 · 1011 阅读 · 0 评论 -
css 模糊
filter: blur(6px)会对元素整体进行模糊,文字也会模糊backdrop-filter:blur(300px)只会模糊背景,可以实现毛玻璃效果原创 2021-09-27 09:55:06 · 186 阅读 · 0 评论 -
用css媒体查询解决position:fixed H5键盘遮挡问题
@media screen and (max-height: 500px) { .confirm { display: none; } }原创 2021-09-13 23:43:31 · 229 阅读 · 0 评论 -
用div实现类似视频的全屏铺满功能
.full{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 100; }原创 2019-12-09 17:29:25 · 395 阅读 · 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 · 166 阅读 · 0 评论 -
纯css实现移动端rem自动计算
换算比例100比1100px === 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 · 359 阅读 · 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 · 6237 阅读 · 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 · 240 阅读 · 0 评论