Css3
关注
分享
扫一扫
文章平均质量分 53
林中明月间。
努力又平庸 ，自卑又内敛 。
展开
-
grid-row、grid-column网格布局规则
菜鸟教程在线编辑器网格布局中 grid-column-start, grid-column-end 和 grid-row-start, grid-row-end_HappyChen666的博客-优快云博客//"item1" 在第 1 行开始，在第 4 行前结束.item1 { grid-row: 1 / 4;}起始网格线 / 跨度值grid-column-start 规定从哪一行开始显示项目。grid-column-end 规定在哪一条行线（column-line）上停止显示..转载 2022-05-06 15:30:48 · 2023 阅读 · 0 评论 -
css3 鼠标样式、cursor: not-allowed鼠标禁止手势
IE，chrome firefox 都能够正常显示cursor: not-allowed; 一般配合使用pointer-events: auto!important;cursor: not-allowed!important;cursor:pointor;是最常用的鼠标样式，即鼠标移动到元素上，比如a标签上会出现一个小手的样式，但是cursor还是其他的样式。现做如下总结：cursor:pointor;图标呈现为指示链接的指针(一只小手)；cursor:help:帮助转载 2022-01-19 16:49:35 · 2032 阅读 · 0 评论 -
css设置四角边框
CSS设置div四个角的样式_花铛-优快云博客_css 四个角css设置四角边框_小诸葛的博客-优快云博客 推荐div四角贴图 代码<div class="popUpContent"></div>background: url("~@/assets/view_images/Corner-TL.png") no-repeat -7px -7px, url("~@/assets/view_images/Corner-TR.png") no-repe...转载 2021-12-04 11:07:52 · 1358 阅读 · 0 评论 -
Css3实现箭头上下浮动的动画效果
https://blog.youkuaiyun.com/qq_39635302/article/details/79477538.development_box .time_tree .more_time { animation: heart 1.3s ease-in-out 2.7s infinite alternate;}/*用transform就流畅了*/@keyframes heart { from { transform: translate(0, -5px); } t.转载 2021-04-07 17:46:16 · 2251 阅读 · 0 评论 -
html引用ttf字体文件
在样式表如此定义：@font-face { font-family: MyFontName;//自定义字体名称 src: url(../fonts/zenicon.ttf)}然后，具体使用：<div style="font-family:MyFontName;">Test Text</div>转载 2020-11-09 16:18:50 · 4126 阅读 · 0 评论 -
iPhone X系列安全区域适配问题
链接：https://zhuanlan.zhihu.com/p/181212066表现头部刘海两侧区域或者底部区域，出现刘海遮挡文字，或者呈现黑底或白底空白区域。产生原因iPhone X 以及它以上的系列，都采用刘海屏设计和全面屏手势。头部、底部、侧边都需要做特殊处理。才能适配 iPhone X 的特殊情况。解决方案设置安全区域，填充危险区域，危险区域不做操作和内容展示。危险区域指头部不规则区域，底部横条区域，左右触发区域。具体操作为：viewport-fit m..转载 2020-08-14 12:10:58 · 1407 阅读 · 0 评论 -
css图片划过浮起的效果
html代码： <div class="galary"></div>css代码：.galary { margin-top: 50px; width: 100px; height: 100px; background: aqua; box-shadow: 0 0 3px 1px rgba(51, 51, 51, 0.5); transition: 0.3s;}.galary:hover { margin转载 2020-07-13 16:47:03 · 2276 阅读 · 0 评论 -
css hover控制其他元素
<html><body><style> #a:hover {color : #FFFF00;} #a:hover > #b:first-child{color : #FF0000;} #a:hover > #b{color : #FF00FF;} #a:hover + #c{color : #00FF00;} #a:hover + #c > #b{color : #0000FF;}</st.转载 2020-06-15 22:35:25 · 8626 阅读 · 0 评论 -
修改滚动条默认样式（CSS）
https://segmentfault.com/a/1190000021855840scrollbar.css@charset "utf-8";/* 修改滚动条默认样式 */::-webkit-scrollbar{ width: 6px; /*设置滚动条宽度为6px*/}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track { border-radius: 12px; background-color: #e7e7e7; .转载 2020-06-11 17:44:33 · 1236 阅读 · 1 评论 -
CSS3 calc() 实现计算
原文链接：http://caibaojian.com/css3-calc.htmlcalc()的运算规则calc()使用通用的数学运算规则，但是也提供更智能的功能：使用“+”、“-”、“*” 和 “/”四则运算； 可以使用百分比、px、em、rem等单位； 可以混合使用各种单位进行计算； 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。css3 的转载 2020-06-05 16:09:00 · 520 阅读 · 0 评论 -
恢复ul,ol的默认样式css
https://www.cnblogs.com/zhaiqianfeng/archive/2012/06/28/4616645.html取消UL和OL符号以及padding和margin，CSS代码如下：ul,ol{list-style:none; margin:0px; padding:0px;} 但想恢复默认确费了点力气！先解释一下为什么要取消：ul,ol开头这样写就是控制所有的ul和ol list-style:none; 就是把列表的项目符号取消，不显示符号，因为在写导航的时候转载 2020-05-22 14:27:07 · 6877 阅读 · 4 评论 -
CSS filter与前端滤镜 修改网站为(黑白)灰色代码
链接：https://zhuanlan.zhihu.com/p/1251379642020.04.04 很多网站都换成了灰色调，如淘宝 百度 掘金 知乎等，通过实地考察，灰度的技术无一例外都使用了以下CSS，如淘宝的：html { -webkit-filter: grayscale(100%); filter: progid:DXImageTransform.Micro...转载 2020-04-07 18:33:23 · 1040 阅读 · 0 评论 -
css左右两栏、左中右三栏布局
左右两栏：<style type="text/css"> .wrap{ margin: 0 auto; width: 1200px; } #left{/*左边宽度固定*/ width: 200px; height: 500px; background: pink; float: left; } #right{ height: 500px; ...原创 2018-09-06 16:33:28 · 4714 阅读 · 0 评论 -
css3 循环动画
<style>*{margin: 0;padding: 0;}.robot{ width: 167px; height: 191px; background: url(robot.png) no-repeat; position: absolute; left: 0px; top: 20px; animation:robotmove 10s line...原创 2018-08-17 16:39:00 · 1578 阅读 · 0 评论 -
class的同级与包含
.同级不加空格 包含或者下面的加空格.headerBg.active中间无空格可以看成一个整体，这个div已加两个class<div class="headerBg active"></div>.div span.a:hover =.div span:hover =.div .a:hover <span class="a">1</...原创 2018-08-02 16:16:26 · 2515 阅读 · 1 评论 -
css3 模拟实现菜单下拉箭头、三角箭头、“大于号”或“小于号”箭头、边框脚
<style>a{ display: block; width: 50px; height: 50px; padding: 0 20px; background: #000; text-decoration: none; ...原创 2018-07-05 21:46:11 · 11583 阅读 · 1 评论 -
用户登录表单
http://sc.chinaz.com/info/151013395484.htm<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti...原创 2018-06-27 16:54:14 · 2143 阅读 · 0 评论 -
hover给图片加遮罩
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title&a原创 2017-12-13 10:38:12 · 2434 阅读 · 0 评论 -
清除浮动BFC、div随子元素高度增加而改变
因为高度塌陷所以需要清除浮动：元素脱离了文档流满足下列条件之一就可触发BFC 【1】根元素，即HTML元素 【2】float的值不为none 【3】overflow的值不为visible 【4】display的值为inline-block、table-cell、table-caption 【5】position的值为absolute或fixed/*解决：清除...原创 2018-05-15 16:23:27 · 411 阅读 · 0 评论 -
css3折纸导航效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta原创 2018-04-29 15:09:57 · 353 阅读 · 0 评论 -
手机h5页面唤起打电话、发邮件、发短信功能、QQ交谈
支持html5的浏览器在web页面里面实现拨打电话的功能<a href="tel:139xxxxxxxx">一键拨打号码</a><a href="mailto:yuojian@163.com">一键发送邮件</a><a href="sms:139xxxxxxx">一键发送短信</a>点击跳转qq聊天窗口&...转载 2018-04-28 12:23:29 · 5180 阅读 · 0 评论 -
3d示例
<style>.box{ width: 100px; height: 100px; padding: 100px; border: 5px solid #000; margin: 30px auto; -webkit-transform-style:preserve-3d; -webkit-perspective:100px;/*景深 近大远小*/}.div{ w...原创 2018-04-28 10:42:33 · 256 阅读 · 0 评论 -
html 隐藏滚动条（pc、移动适用）
css 添加代码:/*HTML5 元素超出部分滚动, 并隐藏滚动条*/#box::-webkit-scrollbar { display: none;}#box::-webkit-scrollbar { width:0px;}原创 2018-04-27 16:34:30 · 4725 阅读 · 3 评论 -
css3 transform 属性
transition 与 transform 属性、用法、区别transition:1s;(写在目标元素中)transition: width 2s linear 200ms,background 2s linear 200ms;那个属性需要过渡写那个/*代表持续时间为1s，延迟时间为2s*/ transition: 1s 2s;通过这四个子属性的配合来完成一个完整的过渡效...原创 2018-04-26 15:25:22 · 1465 阅读 · 0 评论 -
图文环绕布局css
<style> .box{ width: 500px; border: 1px solid #000; } .box img{ float: left; }</style><body> <div class="box"> <img src="img/1.jpg" alt=""> <p>这是内...原创 2019-10-14 16:31:05 · 2806 阅读 · 0 评论 -
如何给伪类添加 hover特效
代码.success{ font-size: 20px; color: #333333; position: relative; padding-bottom: 20px;}.success:hover::after{ width: 30px;}.success::after{ content: ''; display: block;...原创 2019-07-24 09:50:09 · 2971 阅读 · 1 评论 -
CSS3 - 鼠标经过图片缓慢放大、鼠标离开缓慢还原
代码css.newli_img{ width: 231px; height: 149px; overflow: hidden;}.newli_img:hover img{ -webkit-transform:scale(1.2);/*在Safari 和 Chrome兼容下还原*/ -moz-transform:scale(1.2);/*在Fire...转载 2017-11-21 11:17:30 · 1920 阅读 · 0 评论 -
Less、sass、stylus 的使用
https://stylus.comptechs.cn/ Vue 中如何使用stylus 中文文档https://www.jianshu.com/p/5fb15984f22dvue项目中使用stylus预处理器写css语法，老是出现Cannot find module ‘stylus’的错误，鼓捣了很久，包括webstorm中配置stylus的支持，安装依赖。终于找到原因：...转载 2019-07-04 22:50:36 · 626 阅读 · 0 评论 -
css3 勾 叉，勾模拟手机菜单 三横杠,左右
html：<button class="destroy" ></button>css3：.todo-list li .destroy { display: block; position: absolute; top: 0; right: 10px; bottom: 0; width: 40px; he...转载 2019-05-18 16:49:51 · 2026 阅读 · 0 评论 -
vertical-align的使用
转自：https://blog.youkuaiyun.com/diudiu5201/article/details/54666809vertical-align 的使用以前总是想要一些元素垂直居中对齐，经常用line-height，可是对于图片来说，line-height的表现并不理想，所以得用vertical-align:middle。然而用的时候总是无效，查了资料和实践后，终于知道vertic...转载 2019-05-16 16:40:20 · 242 阅读 · 0 评论 -
input获得焦点边框变色，css3 placeholder字体颜色大小
二、设置placeholder文字颜色、字号方式1：因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。::-webkit-input-placeholder { /* WebKit browsers */ color: #999; font-size: 16px;}::-moz-placeholder...转载 2019-02-19 21:14:27 · 1059 阅读 · 0 评论 -
box-shadow属性解析
<style>#div { margin: 50px; width: 100px; height: 100px; background: red; /*box-shadow: 0px 0px 20px 0px #ff0000; /*四周阴影*/}/* 阴影/*box-shadow:[inset] x y blur [spread] colorinset投影...转载 2019-02-28 17:21:48 · 1375 阅读 · 0 评论 -
box-sizing 弹性盒模型
<style> .box{ width: 300px; height: 300px; background: red; margin: 100px auto; padding: 100px; box-sizing:border-box; box-sizing:content-box; }</style><body> <...原创 2019-01-06 22:29:52 · 227 阅读 · 0 评论 -
JS禁止复制粘贴，F12操作
CSS禁止文字复制粘贴/*禁止文字选中*//* html,body{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} */<div unselectable="on" onselectstart="return false;" s...原创 2018-05-14 21:22:25 · 4390 阅读 · 0 评论 -
Css3 clip属性解析
参考博客:https://blog.youkuaiyun.com/nicexibeidage/article/details/78466296clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。clip无法在设置“position:relative”和“position:static”上工作。clip属性只接受三个不同的属性值：&l...转载 2018-10-18 22:04:28 · 2089 阅读 · 0 评论 -
页面加载完毕相关信息淡入效果
参考别人的博客：https://blog.youkuaiyun.com/shuaizi96/article/details/77505449首次打开网页时，因为需要加载一些第三方js包的原因，页面内容显示出来会有或长或短的延迟时间，如果延迟时间太长，那么就需要在这之前加入loading动画来实现一个过渡效果在网上找到一个不错的CSS加载动画效果：30种CSS3炫酷页面预加载loading动画特效这...转载 2018-09-13 16:14:17 · 3637 阅读 · 1 评论 -
Css3 matrix
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><me原创 2018-04-19 17:26:16 · 375 阅读 · 0 评论 -
图片大小自适应、pc端、手机端
写页面的时候经常会遇到需要图片自适应容器大小这样的情况：<style>div{width:400px;height:400px;border:1px solid #000; }img{width:100%;height:100%;}</style>不管容器有多大，只要将img的宽高设置成100%（这里的100%是相对于父级宽高而言）就能自适应容器大小...转载 2018-01-12 16:51:24 · 24512 阅读 · 0 评论 -
网站icon图标添加
<head> <link rel="shortcut icon" href="/public/favicon.ico" type="image/x-icon"> <link rel="icon" href="/public/favicon.ico" type="image/x-icon"></head>这里的`shortcu...转载 2017-12-08 16:08:49 · 2155 阅读 · 0 评论 -
单独为主流浏览器单独定义CSS样式
<script> var user = navigator.userAgent.toLowerCase();//用户代理 var skip;//定义浏览器 var skipversion = {};//定义浏览器版本 (skip = user.match(/msie ([\d.]+)/)) ? skipversion.ie = skip[1] : ...原创 2018-03-05 11:01:16 · 822 阅读 · 0 评论