CSS揭秘
MDistance
这个作者很懒,什么都没留下…
展开
-
box-shadow属性
box-shadow属性语法box-shadow: h-shadow v-shadow blur spread color inset;默认值 none 值 描述 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread...原创 2018-06-03 17:35:21 · 1026 阅读 · 0 评论 -
形状-自适应椭圆
自适应椭圆根据内容自适应宽高,如果宽高相等,显示为一个圆,宽高不等显示为椭圆,如下图所示:自适应椭圆实现想要达到上图所示的效果,我们必须先了解border-radius 的两个特性border-radius可以单独指定水平和垂直半径, 只要用一个斜杠( /) 分隔这两个值即可。 这个特性允许我们在拐角处创建椭圆圆角。#circle{ background: hsl(49, ...原创 2018-09-21 11:18:50 · 545 阅读 · 0 评论 -
复杂背景——棋盘
棋盘背景 上图貌似可以在CSS中很容易重现出来,只要创建两个不同背景定位的方块就可以了,但是并非如此,我们没有办法使用渐变创建一个四周有空隙的方块。 解决方式: 我们可以通过两个直角三角形拼接成,首先我们线创建一个直角三角形,并把它的直角边缩小.div_bg{ background: #eee; background-image: linear-gradient(45...原创 2018-06-08 15:28:02 · 512 阅读 · 0 评论 -
复杂背景——波点
波点背景我们首先使用径向渐变创建一个圆点阵列background: white;background-image: radial-gradient(rgba(200,0,0,.5) 30%, transparent 0);background-size: 50px 50px;效果如上图所示,显然这不是我们想要的结果,我们可以生成两层圆点阵列,通过背景定位把他们错开这样就可以...原创 2018-06-06 14:32:29 · 1050 阅读 · 0 评论 -
复杂背景——网格
网格背景当我们把多个渐变图案组合起来,透过彼此的透明区域显示时,会出现很神奇的效果。下图看起来像是一张方格纹图案的桌布,通过这个思路我们可以把半透明的垂直和水平条纹叠加起来,从而得到这种网格。 1.普通网格背景首先,我们先绘制水平条纹background-image: linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);...原创 2018-06-06 13:58:27 · 1065 阅读 · 0 评论 -
同色系条纹
CSS实现同色系条纹在大多数情况下,我们使用的条纹并不是颜色相差较大的几种颜色组成的,往往是属于同色系的。例如实现下图所示的条纹图案 实现方式:background: repeating-linear-gradient(30deg, #79b, #79b 30px, #58b 0, #58b 60px);不足:使用了两个同色系的...原创 2018-06-06 10:34:49 · 281 阅读 · 0 评论 -
斜向条纹
斜向条纹在前面我们已经实现过CSS条纹背景,利用前面的方法,想要实现60°,30°或者其他角度的斜向条纹是非常困难的。这里我将介绍更加灵活的实现斜向条纹的方式。repeating-linear-gradient()repeating-linear-gradient是css3背景色的一个新属性:重复渐变,可以非常容易的实现隔行变色的效果。 语法background:repe...原创 2018-06-06 10:08:17 · 1581 阅读 · 0 评论 -
CSS3实现条纹背景
条纹背景水平条纹1.我们先创建一个渐变背景background: linear-gradient(#fb3, #58a);2.逐渐拉近两个色标,当两个色标重合在一起,效果如图所示background: linear-gradient(#fb3 50%, #58a 50%); 如果多个色标具有相同的位置,它们会产生一个无限小的过渡区域,过渡的起止色分别是第一个和最...原创 2018-06-06 09:23:04 · 3400 阅读 · 0 评论 -
CSS实现边框内圆角
CSS实现边框内圆角实现如图所示效果的两种方式: 1. 利用两个元素实现利用一个元素实现快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q插入链接 Ctrl + L插入代码 Ctrl + K插入图片 Ctrl + G提升标题 Ctrl + H有序列表 Ctrl + O无序列表 ...原创 2018-06-05 14:02:01 · 11792 阅读 · 0 评论 -
CSS背景定位
灵活的背景定位问题针对某一个特定容器的某一个角对北京做偏移定位background-position方案CSS3中对background-position属性进行了扩展,允许我们指定背景图片距任意角的偏移量,只要在偏移量前面指定关键字即可。.div_bg{ height: 200px; width: 200px; ...原创 2018-06-05 13:20:51 · 972 阅读 · 0 评论 -
多重边框
CSS3多重边框box-shadow方案box-shadow属性介绍利用box-shadow属性实现多重边框 box-shadow的第四个属性称为“扩张半径”,通常指定正值或负值,来控制投影面积的增大或减小,若将垂直和水平的阴影位置置为0,加上一个正值的扩张半径,那么看起来就像一个实线边框,我们也可用border属性实现相同的效果。 box-shadow的优点在于它支持逗号分隔...原创 2018-06-04 14:15:11 · 354 阅读 · 0 评论 -
半透明边框
半透明边框background-clip属性浏览器支持: IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。 注释: Internet Explorer 8 以及更早的版本不支持 background-clip 属性。默认值:border-box语法background-clip: border-...原创 2018-06-03 17:34:54 · 178 阅读 · 0 评论 -
形状-平行四边形
平行四边形是矩形的超集,我们可以通过 skew() 的变形属性把一个普通的块状按钮进行斜向的拉伸,从而形成一个平行四边形。<div href="#" class="button">Click me</div>.button { background: #FAC; transform: skewX(-45deg); text-align: ce...原创 2018-09-21 14:09:57 · 1316 阅读 · 0 评论