随笔分类 -  css

css篇-用filters属性全网站变灰和给灰色图片染色效果
摘要：用filters属性全网站变灰和给灰色图片染色效果 昨天清明节日很多网站的都变灰色的，主要是利用filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。如下 像博客园的首页： 一、filter属介绍 下面简单介绍介绍一下filter各种属性 上原图： f 阅读全文
posted @ 2020-04-05 22:47 pikachuWorld 阅读(1123) 评论(0) 推荐(0)
css篇——flex布局详解
摘要：css篇——flex布局详解 --关于fle布局 常用的还是那几个属性flex-direction，justify-content，align-items，这两天重现翻阅动手都操作了一遍感觉收获不少，测试google浏览器现在系统整理一，如下： 一、Flex 布局是什么？ Flex 是 Flexib 阅读全文
posted @ 2020-03-02 14:15 pikachuWorld 阅读(1183) 评论(1) 推荐(0)
结构与布局-垂直居中
摘要：<style> /*第一种*/ /*main{ width:18em;height:6em;position: absolute;top:50%;left:50%; margin-left:-9em;margin-top:-3em;background: #631082; text-align: c 阅读全文
posted @ 2019-04-17 00:34 pikachuWorld 阅读(176) 评论(0) 推荐(0)
自适应的按钮
摘要：/*自适应按钮*/ button{ padding:.3em .8em; border:1px solid rgba(0,0,0,.1); background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent); border-radius: 阅读全文
posted @ 2016-07-08 14:21 pikachuWorld 阅读(122) 评论(0) 推荐(0)
css3溢出隐藏显示小数点
摘要：.test{ width: 150px; height:40px; border:1px solid #000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .test2{ width: 150px; borde 阅读全文
posted @ 2016-07-07 15:59 pikachuWorld 阅读(1957) 评论(0) 推荐(0)
css 3列
摘要：css3创建等高文本列通过column-count（几列）、column-width和column-gap（列之间的间距）属性实现 下面实现3列，列之间有2em的间距（不过这种对浏览器支持还不太广泛）到目前为止ie9以下（包括ie9）不支持 code: .col{ -moz-column-count 阅读全文
posted @ 2016-07-01 17:05 pikachuWorld 阅读(148) 评论(0) 推荐(0)
css 日历组件（浮雕效果）
摘要：效果图： 表格单元格产生斜面效果，每个单元格border四个边设置不同颜色；顶部左边颜色浅，右边和下部颜色深，然后字体在用阴影处理就可以了。 标签说明： caption:基本用作表格的主题 summary：用来描述表格的内容 <style type="text/css"> table.cal{ bo 阅读全文
posted @ 2016-07-01 16:53 pikachuWorld 阅读(563) 评论(0) 推荐(0)
css3 图片放大缩小闪烁效果
摘要：直接把图片替换就可以了，我的图片是透明的，所以body设置为黑色的，不不要可以去掉 <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>css3 图片放大缩小闪烁效果</title> <style> body{bac 阅读全文
posted @ 2016-06-12 18:37 pikachuWorld 阅读(729) 评论(0) 推荐(0)
css hack
摘要：1.大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。2.\9 ：所有IE浏览器都支持3._和- ：仅IE6支持4.* ：IE6、E7支持5.\0 ：IE8、IE9支持，opera部分支持6.\9\0 ：IE8部分支持 阅读全文
posted @ 2016-04-03 17:51 pikachuWorld 阅读(99) 评论(0) 推荐(0)
网页布局layout
摘要：网页常见的布局有一般一栏、两栏、三栏现在从一栏说起： css: <style type="text/css"> .container{background: #87cbe5;height: 700px;width:500px;/*margin:0px auto;*/margin-left: auto 阅读全文
posted @ 2016-03-31 23:19 pikachuWorld 阅读(498) 评论(0) 推荐(0)