CSS视觉效果

AlphaGooo 发布于2019-08-30 13:16 / 2241人阅读

摘要：视觉效果投影的绘画机制当为一个元素添加时，我们便会从视觉上得到一个投影的效果。双侧投影目前为止，还无法指定投影在水平方向上放大，而在垂直方向上缩小，要实现双侧投影的效果唯一的办法就是使用两块投影来达到目的。

title: CSS视觉效果
date: 2016-12-17
tags: CSS Secrets

0x00 投影的绘画机制

当为一个元素添加 box-shadow 时，我们便会从视觉上得到一个投影的效果。

比如:

#box{
    width: 100px;
    height: 100px;
    background: deeppink;
    box-shadow: 5px 6px 4px rgba(0,0,0,0.5);
}

我们对 div#box 添加了 box-shadow 属性，并指定了三个长度值和一个颜色值。对于这样的用法，我们再熟悉不过了。要得到上图的效果，浏览器渲染引擎其实进行了四步：

以该元素相同的位置和尺寸，画一个 rgba(0,0,0,0.5) 的矩形。

把它向右偏移 5px，向下偏移 6px。

使用高斯模糊算法对其进行 4px 的模糊处理。

模糊后的矩形与原始元素的交集部分会被裁切掉。

所以，从投影绘制的机制来看，绘制的投影其实是在元素的上层的。

单侧投影

box-shadow 鲜为人知的第四个参数，称为 _扩张半径_。这个参数会根据指定的值去扩大(当指定负值时)或缩小投影的尺寸。比如，一个 -5px 的扩张半径会把投影的宽度和高度各减少 10px （即每边各 5px）。

那么，当应用一个负的扩张半径，而它的值刚好等于模糊半径，那么投影的尺寸就会与投影所属元素的尺寸一致，如果不使用偏移参数来移动它，将看不见任何投影。

这正是我们想要的。

box-shadow: 0px 5px 4px -4px black;

我们给了投影一个正的垂直偏移量，而在另外三侧是没有投影的。

双侧投影

目前为止，还无法指定投影在水平方向上放大，而在垂直方向上缩小，要实现双侧投影的效果唯一的办法就是使用两块投影来达到目的。

box-shadow: 6px 0px 5px -4px yellow,
            -6px 0px 5px -4px green;

未完待续。。。

GPU云服务器云服务器视觉效果 css效果效果显示 css jquery 气球css js效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115429.html

「CSS3 」3D效果 & 透视

摘要：第一种方法将属性更改为的数值，便可以将这个空间设置为透视投影，即所有子元素仅仅是不包括自身的投影到屏幕的方式变为透视投影。注意，这个透视投影的像平面和平面是重合的，原理图如下其中，焦点到平面的距离是的值。随着浏览器的不断进步和更新，许多的新特性也崭露头角。许许多多以前需要用 gif 图片或者是 flash 实现的效果，现在使用 CSS 就可以实现了。消耗部分计算能力，从而大大减少了流...

William_Sang 2019-08-28 18:19 评论0 收藏0
[CSS]《CSS揭秘》第四章——视觉效果

摘要：投影单侧投影邻边投影双侧投影模糊距离阴影尺寸不规则投影滤镜可接受的参数基本上跟属性是一样的，但不包括扩张半径，不包括关键字，也不支持逗号分割的多层投影语法毛玻璃效果折角效果投影单侧投影 box-shadow:0px 10px 10px -5px black; showImg(https://segmentfault.com/img/bVbcVC8?w=345&h=352); 邻边投...

AWang 2019-08-30 15:54 评论0 收藏0
css实现的一些视觉效果

摘要：邻边投影双侧投影用两块投影每边各一块来实现不规则投影解决办法是使用滤镜效果，。滤镜，它会给图片增加一种降饱和度的橙黄色染色效果。实现方式毛玻璃效果折角效果折角的解决方案增加一个暗色的三角形来实现翻折效果。投影 1.单侧投影思路是box-shadow 的第四个长度参数。它排在模糊半径参数之后，称作扩张半径。这个参数会根据你指定的值去扩大或当指定负值时，缩小投影的尺寸。例如，一个-5px...

luffyZh 2019-08-29 12:37 评论0 收藏0
关于移动端适配，你必须要知道的

摘要：需要注意，上面的尺寸都是屏幕对角线的长度英寸缩写为在荷兰语中的本意是大拇指，一英寸就是指甲底部普通人拇指的宽度。由于手机尺寸为手机对角线的长度，我们通常使用如下的方法计算的为那它每英寸约含有个物理像素点。导读移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案横屏适配高清屏图片模糊问题 ... ...

lufficc 2019-08-26 13:48 评论0 收藏0
关于移动端适配，你必须要知道的

摘要：需要注意，上面的尺寸都是屏幕对角线的长度英寸缩写为在荷兰语中的本意是大拇指，一英寸就是指甲底部普通人拇指的宽度。由于手机尺寸为手机对角线的长度，我们通常使用如下的方法计算的为那它每英寸约含有个物理像素点。导读移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案横屏适配高清屏图片模糊问题 ... ...

IntMain 2019-08-30 10:55 评论0 收藏0