随笔分类 -  CSS

1 2 下一页
SVG
摘要：一、stroke 属性 1、stroke 属性定义颜色 2、stroke-width 定义厚度 3、store-linecap定义不同类型的开放路径的终结 ps:为什么叫开放路径？同事说，可能是因为没有闭合，表现如下： 4、stroke-dasharray 用于创建虚线 说明：它是一个<length 阅读全文
posted @ 2018-09-30 17:53 Candy-Yao 阅读(141) 评论(0) 推荐(0)
纯 CSS 实现实心三角形和空心三角形
摘要：一、实心三角形 1、代码 2、效果 3、原理 宽为0，高为0，三角形有多高，border值就有多大。然后其他三边透明。 二、空心三角形 原理：后面绝对定位一个三角形 参考文章： 阅读全文
posted @ 2018-09-28 15:49 Candy-Yao 阅读(613) 评论(0) 推荐(0)
container中的内容 垂直-水平居中
摘要：.container{ display: box; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; display: flex; display... 阅读全文
posted @ 2018-09-28 15:42 Candy-Yao 阅读(3084) 评论(0) 推荐(0)
清除样式的css
摘要：html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select { margin: 0; padding: 0; } body { font-family: "Microsoft YaHei"; } ul,ol { list-styl... 阅读全文
posted @ 2018-09-18 10:26 Candy-Yao 阅读(138) 评论(0) 推荐(0)
取消 ios 上下滑动
摘要： 阅读全文
posted @ 2018-08-21 18:32 Candy-Yao 阅读(350) 评论(0) 推荐(0)
改变swiper 按钮swiper-button-next 颜色
摘要：温馨提示：一般如果一个项目只需要一两处使用swiper时，不需要把swiper的css文件引进去，只需要把需要的几个类在swiper.css中复制出来，粘贴到自己的项目css中即可。 改变按钮颜色（红色框是按钮颜色值） 阅读全文
posted @ 2018-07-02 14:26 Candy-Yao 阅读(7363) 评论(0) 推荐(1)
头像跳动 动画
摘要：一、css 二、html 阅读全文
posted @ 2018-06-29 10:12 Candy-Yao 阅读(284) 评论(0) 推荐(0)
移动端“响应式布局”’--rem
摘要：使用目的：为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,我们使用rem的像素单位。 方法一： 1、在页面引入js，获取屏幕大小，更新rem基准。 2、设计稿除以100，得到实际尺寸。如（1920px -> 192rem） 方法二： 原理：rem是相对于根元素<html>，这就意味着，我 阅读全文
posted @ 2018-04-16 19:10 Candy-Yao 阅读(397) 评论(0) 推荐(0)
网页中嵌入特殊字体
摘要：【转】http://helloweb.wang/qianduankaifa/628.html 阅读全文
posted @ 2018-04-08 14:16 Candy-Yao 阅读(124) 评论(0) 推荐(0)
css3 实现明信片正背面翻转
摘要：预览明信片 正面 背面 这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的... 阅读全文
posted @ 2018-04-06 17:31 Candy-Yao 阅读(321) 评论(0) 推荐(0)
css3 炫酷下拉菜单
摘要：炫酷下拉菜单 HTMl5 HTMl1 HTMl2 HTMl3 HTMl4 ... 阅读全文
posted @ 2018-03-29 14:12 Candy-Yao 阅读(538) 评论(0) 推荐(0)
图片垂直居中的方法（适合只有一行文字和图片）
摘要：1、父盒子的行高设置为父盒子的高度。 2、给图片设置 display: inline-block; vertical-align: middle; 最终效果如下: 阅读全文
posted @ 2017-09-16 18:38 Candy-Yao 阅读(309) 评论(0) 推荐(0)
容器装不下内容时，显示滚动条
摘要：只需要给盒子设置 overflow：auto； 阅读全文
posted @ 2017-09-10 00:07 Candy-Yao 阅读(243) 评论(0) 推荐(0)
文本超出用省略号代替
摘要：单行文本超出省略号显示 多行文本超出省略号显示 将height设置为line-height的整数倍，防止超出的文字露出。 阅读全文
posted @ 2017-09-09 23:57 Candy-Yao 阅读(307) 评论(0) 推荐(0)
css 始终让图片占满自适应盒子（图片不失真）
摘要：要去上班了，时间比较紧，先把代码粘出来，原理慢慢讲 我来了，今天是农历七月八日，昨天是七夕，不知道为什么，突然通知放假半天（嘎嘎），好吧，没什么！！！走到半路的我看到通知，立马撤了。正好回来把这个原理补上。 一般情况下，网页嵌入人物图片，是必须要按比例缩放的，不像一般的图片操作起来比较简单。 1、设 阅读全文
posted @ 2017-08-29 08:43 Candy-Yao 阅读(14553) 评论(1) 推荐(0)
单（多）行文本溢出显示省略号...
摘要：一、单行文本 注：white-space:normal（默认，空白会被浏览器忽略）|pre（空白会被浏览器保留，行为方式如同<pre>标签）|nowrap（文本不换行，直到遇到<br />标签）|pre-wrap（保留空白并正常换行）|pre-line（合并空白并换行）|inherit（继承）； 二 阅读全文
posted @ 2017-08-27 10:57 Candy-Yao 阅读(285) 评论(0) 推荐(0)
超出容器显示滚动条
摘要：.scroll { width: 100px; height: 100px; overflow: auto; } 阅读全文
posted @ 2017-08-27 10:30 Candy-Yao 阅读(578) 评论(0) 推荐(0)
关于display：flex；兼容写法
摘要：作者：郭爽 链接：https://www.zhihu.com/question/22991944/answer/63604478 来源：知乎 阅读全文
posted @ 2017-08-27 10:27 Candy-Yao 阅读(10204) 评论(0) 推荐(0)
CSS3动画详解
摘要：首先，老阮在他博客讲的很明白了（http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html），这里我来全面总结一下。 一、transition 注：transition需要明确知道，开始状态和结束状态的具体数值，才 阅读全文
posted @ 2017-08-26 18:04 Candy-Yao 阅读(303) 评论(0) 推荐(0)
翻页文字特效
摘要：@import url(https://fonts.googleapis.com/css?family=Lato:900); *, *:before, *:after{ box-sizing:border-box; } body{ font-family: 'Lato', sans-serif; } div.foo{ width: 90%; margin: 0 auto; t... 阅读全文
posted @ 2017-08-20 17:04 Candy-Yao 阅读(352) 评论(0) 推荐(0)

1 2 下一页