css
关注
分享
扫一扫
css常用积累...
web修理工
这个作者很懒，什么都没留下…
展开
-
清浮动 css
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-12-17 17:28:49 · 92 阅读 · 0 评论 -
css如何修改滚动条样式
默认滚动条样式如下：那如何修改呢？如下代码：<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="height:400px;">这里是内容222</p> <p>这里是内容333</p> </div>转载 2021-09-17 15:40:40 · 1978 阅读 · 0 评论 -
css渐变
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.原创 2021-07-07 09:00:49 · 71 阅读 · 0 评论 -
css 实现半圆弧度
border-radius: 50% 50% 0 0/50% 100% 0 0;原创 2021-06-15 12:14:21 · 3081 阅读 · 1 评论 -
css3 动画工具 Animate.css
Animate.css官网:https://animate.style/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini原创 2021-04-19 11:41:13 · 1585 阅读 · 0 评论 -
css 复制粘贴
* {moz-user-select: -moz-none;-moz-user-select: none;-o-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;}原创 2021-01-26 15:20:46 · 651 阅读 · 0 评论 -
CSS3 多重背景图片
<div></div> <style> *{ margin: 0; padding: 0; } div{ width: 600px; height: 190px; border: 1px solid #000; margin: 100px auto; .转载 2020-11-14 18:07:31 · 242 阅读 · 0 评论 -
css 磨砂透明蒙版
<block wx:if="{{explain}}"> <view class="about"> <image class="about-bg" src="/image/me/newfriend/about.png"> <text class="about-close iconfont iconguanbi" bindtap="explain" /> </image></view></block>/*原创 2020-11-12 10:19:47 · 1140 阅读 · 0 评论 -
css media简介
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.原创 2020-08-12 14:37:50 · 136 阅读 · 1 评论 -
css 水平从左到右 从下到上 css排版
<!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> .box { .原创 2020-06-17 18:19:35 · 1813 阅读 · 0 评论 -
css 图片不变形
1.web中img 标签设置一个边不会变形img{width:100px //等比例缩小}2.设置背景图片background-Image:url();background-size:widht heightbackground-position:centerbackground-repeat :no-repeat3.div包裹一下 超过的 剪切<div><img/></div>...原创 2020-06-11 11:56:27 · 555 阅读 · 0 评论 -
dom隐藏显示 css
hidden<p hidden="hidden">这是一段隐藏的段落。</p>setAttribute('hidden',true)displaydiv {display: none}改变通明色.style.color='transparent'.style.opacity=0.style.color=raba(0,0,0,0)原创 2020-06-06 15:35:53 · 153 阅读 · 0 评论 -
css进度条
1.定位left来实现2.定位width来实现3 进度背景可以用 background-image: linear-gradient(60deg, transparent 0rem, transparent 0.8rem, #4dafe2 0.8rem, #4dafe2 1.6rem, transparent 1.6rem, transparent 2.4rem, #4dafe2 2.4rem);修饰<!DOCTYPE html><html lang="en"><原创 2020-06-06 14:54:50 · 229 阅读 · 0 评论 -
03 h5对话框dialog
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-原创 2020-06-04 09:13:05 · 524 阅读 · 0 评论 -
05 css l h v a 伪类
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-原创 2020-06-04 09:12:36 · 181 阅读 · 0 评论 -
06nth-child nth-type-of
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Page Title</title> <meta name="viewport" content="width=device-width, initi原创 2020-06-04 09:12:22 · 94 阅读 · 0 评论 -
css事项省略符号的使用
text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;原创 2020-06-03 11:01:06 · 89 阅读 · 0 评论 -
css 实现喇叭效果
<!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> .content { .原创 2020-06-03 10:51:50 · 1930 阅读 · 0 评论 -
css pc大小屏适配及h5手机屏幕兼容 rem
@media查询比较适合pc 屏幕适配<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&.原创 2020-06-01 09:32:24 · 2153 阅读 · 0 评论 -
css hover的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.原创 2020-06-01 09:27:35 · 498 阅读 · 0 评论 -
css3翻牌效果 及动画闪动
<html><head> <title>3D翻牌效果 </title> <meta charset="UTF-8"> <!-- <script type="text/javascript" src="jquery.js"></script> --> <style type="text/css"> .outer { width.原创 2020-05-30 16:04:19 · 441 阅读 · 0 评论 -
animation steps属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .hi{ width: 50px; height: 72px; background-image: url("http://s.cd原创 2020-05-29 16:14:55 · 344 阅读 · 0 评论 -
css 文本换行问题
white-space:normal 默认。空白会被浏览器忽略。pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。pre-wrap 保留空白符序列，但是正常地进行换行。pre-line 合并空白符序列，但是保留换行符。inherit 规定应该从父元素继承 white-space 属性的值。word-break:normal 使用浏览器默认的换行规则。br原创 2020-05-29 14:04:58 · 375 阅读 · 0 评论 -
自定义css字体
1.参考字体: https://www.fontke.com/2.下载.ttf包.ttf字体包处理方式http://font-spider.org/ 使用node 字体压缩进行压缩参考:https://blog.youkuaiyun.com/amihui/article/details/53023358)参考:https://github.com/aui/font-spider/blob/master/README-ZH-CN.md使用base64 进行转化使用 https://transfonter.原创 2020-05-28 10:45:08 · 159 阅读 · 0 评论 -
css优雅降级和渐进增强
优雅降级:一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。.transition { /*优雅降级写法*/ transform:rotate(30deg); -o-transform: rotate(30deg);//-o opera浏览器前缀 -moz-transform: rotate(30deg);// -moz代表firefox浏览器私有属性-webkit-transform: rotate(30deg);// -webkit代表chrome原创 2020-05-20 23:04:44 · 187 阅读 · 0 评论 -
css3 实现毛玻璃效果
背景高斯模糊 blur 值越大越模糊backdrop-filter: blur(4rpx); ``原创 2020-05-20 20:21:10 · 671 阅读 · 0 评论