纯css构造多边形div

设计师画的方案里有如下的图形：如果只是一个简单的五边形，可以用css shape去做。仔细分析图形，发现它实际上是3个五边形的叠加：1. 最外面一层浅蓝色的稍大一些，2. 中间一层深蓝色颜色和背景相同，但尺寸略小，盖在下面那层上，由此而产生了一个边框的效果，3. 最里面的五边形颜色最深。所以一共是这么3层形状差不多的五边形。我最开始的想法是先画一个深蓝色的矩形，然后用背景色

业界 2016年07月23日

获取元素css值

最近写东西碰到一个问题，通过document.getElementById(id).style.XXX无法获取到样式值？查完资料才发现方法只能获取元素的内联样式，那要获取内部样式或外部样式该怎么办？ getComputedStyle 原来获取外部样式或内部样式用的是window.getComputedStyle方法，用法如下：getComputedStylediv{widt

业界 2016年07月21日

Less

CSS编译语言编译浏览器中使用：less.min.jsNode中编译lessc demo.less // 直接在cli中输出lessc demo.less test.css // 将把demo.less 编译到 test.css 中 （lessc url newUrl）lessc --clean-css demo.less test.css // 将demo.less 编

业界 2016年07月21日

CSS3 聊天气泡框以及 inherit、currentColor 关键字

效果如上图所示，主要用到CSS3的伪类::after、::before，以及圆角边框border-radius属性。对于下面的气泡框，可以有两种方式实现小三角：传统方式，利用CSS画小三角，利用到了透明背景和边框属性transparent的应用。CSS3的transform属性的使用然后通过position定位到合适的位置。此外，本文还会讲一下CSS的inherit属性值的

业界 2016年07月21日

前端手册

前端手册 前端手册 目录CSS编码规范HTML编码规范JavaScript编码规范其他规范开发工具的使用好书推荐篇学习指导篇前端优化其他更多知识点见issues目录不全，请阅读在线版 下载离线版：pdf、epub、mobi 文档会不定时更新，可以Watch或Star本文挡——Github，更欢迎您加入编辑维护 声明：编码规范参考[百度前端开发规范]修改，或整理于互联网，如有

业界 2016年07月20日

horiontal center and vertical middle in CSS

写在前面的话：1: 为了方便起见，接下来我都会把想要居中的元素，不管是一行text，还是一个div，都叫做‘目标元素’， 把包含这个目标元素的叫做‘父元素’。（额。。。。这两个名字如此不对称，我也是醉了。）2: 我会给一个元素设置一个同名的class和id，class用了写一些实际上跟居中没有关系的css，只是为了好看；id呢用来写跟居中有关的css，免得混淆了。Case

业界 2016年07月20日

移动web开发浅谈之那些我们需要知道的基础

前言开发生涯总是丰富多采，工作多年，不同领域还是逃不过雨露均沾，之前开发过android，微信，ios，web网站也玩过。但是对于移动web这一块，确实没有专门很深入的学习，现在需要做了，也将自己的学习过程记录下来，供大家互相学习，说的不对，可以报警。正文概念本次要谈的移动web不是web app，只是很普通的移动端的web界面。移动web可以这么理解：就是把以前在pc上的

业界 2016年07月18日

书页效果

书页效果.book {position: relative;width: 200px;height: 248px;margin-left: 20px;border: 1px # eee solid;background-color: # fff;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2)}.book::after {positi

业界 2016年07月18日

css居中最佳实践

css居中是非常常见的问题，也是面试热门，现在对居中问题做个总结水平居中万能的text-align居中给父元素添加text-align:　center,子元素都会居中，无论是inline还是block缺点：text-align属性会继承会影响后代元素display: table配合margin: 0 auto.center {display: table;margin: 0

业界 2016年07月18日

一些css小问题

块级元素，引用百度百科块级元素特点：①总是在新行上开始；②高度，行高以及外边距和内边距都可控制；③宽度缺省是它的容器的100%，除非设定一个宽度。④它可以容纳内联元素和其他块元素行级元素，引用百度百科块级元素特点：①和其他元素都在一行上；②高，行高及外边距和内边距不可改变；③宽度就是它的文字或图片的宽度，不可改变④内联元素只能容纳文本或者其他内联元素（‘缺省’我也不知道是什

业界 2016年07月18日