网站优化自己可以做吗,龙华网站建设首页地址,网站建设工作室怎么接单,网络营销价格上一篇章的末尾#xff0c;我们只用一个 div 元素写了一个鸡蛋#xff0c;在欧几里得平面几何中#xff0c;鸡蛋的形状已经不能算是标准形状了。对于非标准的形状#xff0c;没有比较直观的几何规律#xff0c;命名方面也更加困难#xff0c;俗称不规则图形#xff0c;在…上一篇章的末尾我们只用一个 div 元素写了一个鸡蛋在欧几里得平面几何中鸡蛋的形状已经不能算是标准形状了。对于非标准的形状没有比较直观的几何规律命名方面也更加困难俗称不规则图形在欧几里得平面几何中将其统称为多边形。
在平行四边形篇中我们首先使用常规的盒模型写出了矩形与正方形。然后使用 transform 属性中的 skew 方法做斜切写出了传统平行四边形和菱形。
在三角形与梯形篇中我们引入 border 属性通过对边框的巧妙控制写出了梯形与三角形。
在弧形篇中我们再次引入 border-radius 属性通过对圆角边框的灵活运用写出了圆形、椭圆形、扇形、吃豆人和鸡蛋。
那么今天我们再次引入一个 box-shadow 属性通过对阴影效果的灵活使用写出更多令人不可思议的多边形吧 一、阴影效果
1. 基本用法
在 CSS 中box-shadow 属性用于在元素的框架上添加阴影效果。
width: 800px;
height: 400px;
background: red;
box-shadow: 50px 25px green; 可以看到box-shadow 属性后面跟了三个值 box-shadow: offset-x offset-y color; offset-x阴影在水平方向的偏移量水平向右为正方向 offset-x阴影在竖直方向的偏移量竖直向下为正方向 color阴影颜色。
2. 模糊半径
接下来我们添加一个值
width: 800px;
height: 400px;
background: red;
box-shadow: 50px 25px 25px green; box-shadow: offset-x offset-y blur-radius color; blur-radius 阴影模糊半径 值越大模糊面积越大阴影就越大越淡 不能为负值 默认为 0此时阴影边缘锐利。 对于长而直的阴影边缘它会创建一个过渡颜色用于模糊 以阴影边缘为中心、模糊半径为半径的局域过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。 关于数字图像处理的模糊算法这里就不做展开了。
3. 扩散半径
接下来我们再添加一个值
width: 800px;
height: 400px;
background: red;
box-shadow: 50px 25px 25px 25px green; box-shadow: offset-x offset-y blur-radius spread-radius color; spread-radius 阴影扩散半径 取正值时阴影扩大 取负值时阴影收缩 默认为 0此时阴影与元素同样大 需要考虑 inset。
4. 内阴影
此时咱们又看到了一个关键词 inset我们来试试看是什么样的。
width: 800px;
height: 400px;
background: red;
box-shadow: inset 50px 25px green; 可以看到如果没有指定 inset默认阴影在边框外即阴影向外扩散。使用 inset 关键字会使得阴影落在盒子内部这样看起来就像是内容被压低了。此时阴影会在边框之内即使是透明边框、背景之上、内容之下。
具有 inset 关键词的时候同时添加上模糊半径和扩散半径的情况这里就留给大家自己去尝试了。
5. 多个阴影
我们可以在同一个元素上设置多个阴影效果并用逗号将他们分隔开。
width: 800px;
height: 400px;
background: red;
box-shadow: 50px 25px green, 25px 50px blue; 可以看到每一个阴影效果都是独立的可以放开随意控制。
width: 800px;
height: 400px;
background: red;
box-shadow: 50px 25px 25px 25px green, inset 25px 50px 25px blue; box-shadow 属性还可以设置 none 关键字将其元素设置为没有阴影效果。
box-shadow 属性与别的属性相结合还可以得到很多不可思议的效果这里就不再展开了。 二、月牙
我们设想一个问题当一个元素同时设置了 border-radius 属性那么阴影也会有圆角效果吗
咱们不妨直接在上一篇章弧形篇中的圆形的基础上添加一个阴影看看效果
width: 800px;
height: 800px;
background: yellow;
border-radius: 50%;
box-shadow: 50px 50px red;
我们把圆形设置为黄色阴影设置成红色得到如下结果 可以看到阴影也会有圆角效果。
既然如此那么我们设置圆的颜色为透明色
width: 800px;
height: 800px;
background: transparent;
border-radius: 50%;
box-shadow: 50px 50px red; 就这样简简单单的我们就写了一个月牙出来了 三、太空入侵者
咱们来思考一个问题如果一个元素阴影的偏移量很大超过了元素本身的大小岂不是元素和阴影分离了呢
width: 200px;
height: 200px;
background: red;
box-shadow: 300px 300px green;
看看结果 可以看到阴影和元素本身分离了但是阴影和元素本身是全等大小和形状都一样的。
前面说了我们可以在同一个元素上设置多个阴影效果并用逗号将他们分隔开。那么我们是否可以借助这个特性写出更加奇特的效果了呢
width: 50px;
height: 50px;
background: red;
box-shadow: 0 0 0 50px red,0 50px 0 50px red,-125px 75px 0 25px red,125px 75px 0 25px red,-150px -150px 0 0 red,150px -150px 0 0 red,-100px -100px 0 0 red,100px -100px 0 0 red,-150px -50px 0 0 red,-100px -50px 0 0 red,100px -50px 0 0 red,150px -50px 0 0 red,-200px 0 0 0 red,-150px 0 0 0 red,150px 0 0 0 red,200px 0 0 0 red,-250px 50px 0 0 red,-200px 50px 0 0 red,200px 50px 0 0 red,250px 50px 0 0 red,-250px 100px 0 0 red,250px 100px 0 0 red,-250px 150px 0 0 red,-150px 150px 0 0 red,150px 150px 0 0 red,250px 150px 0 0 red,-100px 200px 0 0 red,-50px 200px 0 0 red,50px 200px 0 0 red,100px 200px 0 0 red;
这样我们写了 30 个阴影控制了每一个阴影的偏移位置和部分阴影的扩散。于是我们得到了古老 FC 游戏小蜜蜂中的太空入侵者。 是不是很神奇如此复杂的形状我们只用了一个 div 元素。
由于我们可以定义任意多个阴影并且可以控制每一个阴影的偏移量同时每一个阴影都可以独立控制其模糊半径和扩散半径。因此理论上我们可以只用一个 div 元素写出任何我们想要的形状
由于多边形是没有固定形状的不同形状的所属规律也是不同的。因此对于咱们的多边形篇我们就这样写了一个由弧形组成的月牙形状和由直线组成的太空入侵者形状。聪明的您我猜一定可以写出更多不可思议的形状吧
↓
↓
↓
好滴咱们的多边形篇就先写到这里吧这里留下一个问题阴影和元素本身是全等形状和大小一样的加上扩散也最多是相似形状一样大小不一样的。那么我们要写更加不可思议的形状有没有更好的方法呢
敬请期待我们的下一个篇章 —— 伪元素篇。 关注“临界程序员”微信公众号为您送上更多精彩内容
