《CSS3揭秘》上（边框，投影，渐变，条纹效果，蚂蚁行军）
最近看了《CSS3揭秘》一书，里面真的是干货满满呀，现将常用到的一些技巧归纳总结，便于日后用到查找。不得不感叹学无止境哦~ 1、边框与背景 半透明边框 技巧归纳：使用背景剪切属性，将背景的显示不包含边框 background-clip：对背景进行剪切，这个是根据css的盒模型分 ...
原文：[css 揭秘]：CSS揭秘 技巧（二）：多重边框
我的github地址：https: github.com FannieGirl ifannie 源码都在这上面哦 喜欢的给我一个星吧 多重边框 问题：我们通常希望在css代码层面以更灵活的方式来调整边框样式 方案一：box shadow 目前为止，我们大多数人可能已经用过 或者滥用过 box shadow来生成投影，不太为人之的是，它还接受四个参数 扩张半径 ，通过制定正值或负值，可以让投影面积加 ...
2017-02-20 19:16 0 1339 推荐指数：
相关推荐
《CSS揭秘》笔记（一）
前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug。如今的挑战是，在保证 DRY ① 、可维护、灵活性、轻量级并且尽可能符合标准的前提下，把我们手中的这些CSS特性转化为网页中的各种创意。这正是这本书将要呈现的内容。——引用自前言 ①DRY ...
[CSS揭秘]切角效果
将角切掉也是一种流行的设计风格 传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果 有了CSS3,我们完全可以使用新技术来实现 第一种方案: CSS渐变 需求一: 一个矩形需要切掉一个45°角 使用线性渐变来实现 background: #58a ...
《css3揭秘》的效果code
1.在阅读css3揭秘的基础上，跟着书中的效果组合起来的这组代码。 2.代码中有四张图片分别是 1.jpg 2.jpg 3.jpg 4.jpg; 作为demo，图片名称没有语义。 3.兼容性： IE上有部分并不兼容，Edge，FF，chrome没有问题。 4.下面是一个选择器的实现 ...
《css揭秘》下（伪元素，文字背景，垂直居中技巧，文字环绕）
本篇主要记录《CSS3揭秘》一书中后面几章的常用技巧。 1、伪元素换行 先看下HTML代码，如下 默认显示效果： 一般情况下，我们喜欢直接在第一个span元素后面加个换行符<br>，但是它对于语义来说并不友好,或者将第一个span设置成块元素。这里说的换行技巧是使用 伪 ...
[CSS揭秘]扩大可点击区域
目的: 想给一个简单的小按钮扩大其热区在四个方向上均向外扩张10px 解决方案: 1. 常规的解决方案可能是设置一圈透明边框。 border: 10px solid transparent; 2. 但是如果按钮有背景色，那么边框很可能会扩大按钮的可视尺寸。于是可以采用 ...
CSS实现多重边框和内凹圆角
CSS实现多重边框 CSS实现内凹圆角的思路【截图来自慕课网】： ...
【基础】CSS实现多重边框的5种方式
简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性，但如果要兼容老的浏览器，则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案，大家可以根据项目实际及兼容性要求等情况，选择最适合的实现方案。 1 利用描边(outline)属性 方案1利用描 ...