CSS
镜花幻影空意摇
这个作者很懒,什么都没留下…
展开
-
CSS相关笔记
文字相关.text { width: 200px; line-height: 1.5em; background: beige; background-size: auto 3em; background-origin: content-box; background-image: linear-gradient(rgba(0, 0, 0, 0.2) 50%, transparent 0); font-variant-ligatures: common-liga原创 2022-03-29 10:25:19 · 790 阅读 · 0 评论 -
css绘制金字塔
<div class="pyramid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div></div>.pyramid{ width: 500px; height: 500px; display: flex; .原创 2022-03-25 17:25:15 · 817 阅读 · 0 评论 -
css 既有渐变,也有动画背景,管道动态,css边框
.rowLine13{ background: url("../../assets/images/index/arrowLeft.png") repeat no-repeat, linear-gradient(to bottom, $color11 10%, $color1, $color11 90%); animation: moveLeft 5s linear infinite;}//动画效果@keyframes moveLeft { 0% { backgr原创 2022-03-10 15:21:55 · 194 阅读 · 0 评论 -
css样式,背景渐变+图片,三角-实心-空心
渐变背景+背景图片background: url("../../assets/images/index/arrowLeft.png") repeat no-repeat, linear-gradient(to bottom, $color44 10%, $color4, $color44 90%);背景图匀速过度@keyframes moveLeft { 0% { background-position: 320px center; }原创 2021-03-03 16:08:02 · 337 阅读 · 1 评论 -
ie样式问题
ie浏览器密码框出现眼睛图标问题input::-ms-reveal {display: none;}ul li点的样式其他浏览器 ul li::marker{ color : #D8D8D8; } ie浏览器 li{ color : #D8D8D8; }原创 2021-03-02 11:21:29 · 91 阅读 · 0 评论 -
去掉input number类型后的上下箭头
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none;} input[type="number"] { -moz-appearance: textfield;}input 为 type="number"时,最大、最小长度失效,解决办法如下 if (e.length > 8) { this.tableData[i].job_number.原创 2020-09-24 09:17:30 · 1146 阅读 · 0 评论 -
网页css滤镜
网页整体灰色body.memorial>* { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); fi...原创 2020-04-24 10:15:07 · 142 阅读 · 0 评论 -
CSS奶油按钮
转圈@keyframes rotate{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); }}.rotate{ animation: rotate 1s infinite linear;}原创 2020-03-18 12:12:52 · 142 阅读 · 1 评论 -
css不知父元素宽高时水平垂直居中
<div id="main" style="width:1000px;height:500px;background-color:#ff0;position:relative"> <div id="d1" style="width:200px;height:200px;"></div></div>css方式一:相对定位#d1{ b...原创 2019-08-28 11:12:18 · 202 阅读 · 0 评论 -
css和jQuery实现ppt
css实现ppt.banner{width:400px;height:400px;margin:0 auto;background-size:cover;background-position:center;animation:banner 10s; /动画名称 动画所需时间/animation-timing-function:linear; /播...原创 2019-07-26 11:46:54 · 91 阅读 · 0 评论