前言
前面两篇文章都有提到过box-shadow，里面也有很多的基础知识，有看过的小伙伴应该都有或多或少的收获吧，今天我们再从基础入手，希望能让大家更熟悉它。
没有看过之前文章的小伙伴请点击：
下面我们从最基础的开始演示。
单侧投影
关键点: 1、外 box-shadow 前四个参数：x 偏移值、y 偏移值 、模糊半径、扩张半径。 2、单侧投影的核心是第四个参数：扩张半径。这个参数会根据你指定的值去扩大或缩小投影尺寸，如果我们用一个负的扩张半径，而他的值刚好等于模糊半径，那么投影的尺寸就会与投影所属的元素尺寸完全一致，除非使用偏移量来移动他，否则我们将看不到任何投影。
|
1 |
<style><br>.left {<br> box-shadow: -8px 0 5px -5px #333;<br>}<br><br>.right {<br> box-shadow: 8px 0 5px -5px #333;<br>}<br><br>.top {<br> box-shadow: 0 -8px 5px -5px #333;<br>}<br><br>.bottom {<br> box-shadow: 0 8px 5px -5px #333;<br>}<br></style><br><div class='left'>左</div><br><div class='right'>右</div><br><div class='top'>上</div><br><div class='bottom'>下</div> |
立体文字阴影
知识点：
1、立体文字阴影的关键点在于多层 text-shadow 的叠加
2、合理运用了 SASS 函数来自动计算多层 text-shadow 的 css 代码
3、运用了 Sass 的颜色函数，渐进实现层级阴影颜色 – fade-out: 改变颜色的透明度，让颜色更加透明 – desaturate: 改变颜色的饱和度值，让颜色更少的饱和
4、HSL(颜色值)
- H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 – 360
- S：Saturation(饱和度)。取值为：0.0% – 100.0%
- L：Lightness(亮度)。取值为：0.0% – 100.0%
|
1 |
<style><br>@function blessing($color) {<br> $val: 0px 0px $color;<br> @for $i from 1 through 50 {<br> $color: fade-out(desaturate($color, 1%), .02);<br> $val: #{$val}, -#{$i}px #{$i}px #{$color};<br> }<br> @return $val;<br>}<br><br>div {<br> text-align: center;<br> font-size: 20vmin;<br> line-height: 45vh;<br> text-shadow: blessing(hsl(0, 100%, 50%));<br> color: hsl(14, 100%, 60%);<br>}<br></style><br><div>福</div> |
编译后的css(推荐scss在线编译为css工具) https://www.sassmeister.com/
|
1 |
...<br>div {<br> text-align: center;<br> font-size: 20vmin;<br> line-height: 45vh;<br> text-shadow: 0px 0px #992400, <br> 1px 1px rgba(152, 36, 1, 0.98), <br> 2px 2px rgba(151, 37, 2, 0.96), <br> 3px 3px rgba(151, 37, 2, 0.94), <br> ...<br> ...<br> ... <br> 49px 49px rgba(116, 56, 37, 0.02), <br> 50px 50px rgba(115, 56, 38, 0);<br> color: #ff6333;<br>} |
从浅到深的学习 CSS3阴影(box-shadow)
从浅到深的学习 CSS3阴影(box-shadow)
线性渐变模拟长阴影
知识点
1、借用了元素的两个伪元素
2、通过渐变色填充两个伪元素，再通过位移、变换放置在合适的位置
|
1 |
<style><br>div {<br> position: relative;<br> width: 30vmin;<br> height: 30vmin;<br> line-height: 30vh;<br> text-align: center;<br> font-size: 30px;<br> background: #fff;<br> margin: 30vmin auto;<br>}<br><br>div::before,<br>div::after {<br> content: "";<br> position: absolute;<br> top: 0;<br> left: 0;<br> right: 0;<br> bottom: 0;<br> z-index: -1;<br>}<br><br>div::before {<br> content: ':before';<br> font-size: 30px;<br> text-align: center;<br> line-height: 30vh;<br> transform-origin: 0 50%;<br> transform: translate(100%, 0) skewY(45deg) scaleX(.6);<br> background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);<br>}<br><br>div::after {<br> content: ':after';<br> font-size: 30px;<br> text-align: center;<br> line-height: 30vh;<br> transform-origin: 0 0;<br> transform: translate(0%, 100%) skewX(45deg) scaleY(.6);<br> background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);<br>}<br></style><br><div>Web秀</div> |
从浅到深的学习 CSS3阴影(box-shadow)
渐变实现内切角
知识点
1、阴影实现的关键点在于使用伪元素绝对定位在容器的一角，元素本身透明，阴影扩散开形成内切圆角效果
2、阴影实现缺点，单个标签最多只能是2个内切圆角
3、径向渐变实现内切圆角可以是4边
|
1 |
<style><br>div {<br> position: relative;<br> width: 20vw;<br> height: 8vw;<br> margin: 1vw auto;<br> border-radius: 1vmin;<br> overflow: hidden;<br> line-height: 8vw;<br> color: #fff;<br> text-align: center;<br>}<br><br>.shadow::before {<br> position: absolute;<br> content: "";<br> top: -2vw;<br> left: -2vw;<br> width: 4vw;<br> height: 4vw;<br> border-radius: 50%;<br> box-shadow: 0 0 0 15vw #e91e63; <br> z-index: -1;<br>}<br><br>.shadow::after {<br> position: absolute;<br> content: "";<br> bottom: -2vw;<br> right: -2vw;<br> width: 4vw;<br> height: 4vw;<br> border-radius: 50%;<br> box-shadow: 0 0 0 15vw #e91e63; <br> z-index: -1;<br>}<br><br>.linear {<br> background-size: 70% 70%;<br> background-image: <br> radial-gradient(<br> circle at 100% 100%, <br> transparent 1vw, <br> transparent 2vw, <br> #03A9F5 2vw),<br> radial-gradient(<br> circle at 0 0, <br> transparent 0, <br> transparent 2vw, <br> #03A9F5 2vw),<br> radial-gradient(<br> circle at 100% 0, <br> transparent 0, <br> transparent 2vw, <br> #03A9F5 2vw),<br> radial-gradient(<br> circle at 0 100%, <br> transparent 0, <br> transparent 2vw, <br> #03A9F5 2vw);<br> background-repeat: no-repeat;<br> background-position: <br> right bottom, <br> left top, <br> right top, <br> left bottom;<br>}<br></style><br><div class="shadow">阴影实现缺点最多是2边</div><br><div class="linear">径向渐变内切圆角4边</div> |
从浅到深的学习 CSS3阴影(box-shadow)
圆环进度条动画
知识点 ：圆环进度条的移动本质上是阴影顺序延时移动的结果。
|
1 |
<style><br>body {<br> background: #000;<br>}<br><br>.container {<br> position: relative;<br> overflow: hidden;<br> width: 124px;<br> height: 124px;<br> overflow: hidden;<br> margin: 100px auto;<br> border-radius: 50%;<br>}<br><br>.shadow {<br> position: absolute;<br> top: 50%;<br> left: 50%;<br> transform: translate(-50%, -50%);<br> width: 120px;<br> height: 120px;<br> line-height: 120px;<br> border-radius: 50%;<br> color: #fff;<br> font-size: 20px;<br> cursor: pointer;<br> box-shadow: <br> 60px -60px 0 2px #e91e63, <br> -60px -60px 0 2px #e91e63, <br> -60px 60px 0 2px #e91e63, <br> 60px 60px 0 2px #e91e63;<br> text-align: center;<br>}<br>.shadow:hover {<br> animation: border 0.5s ease forwards;<br>}<br><br>@keyframes border {<br> 0% {<br> box-shadow: <br> 60px -60px 0 2px #e91e63, <br> -60px -60px 0 2px #e91e63, <br> -60px 60px 0 2px #e91e63, <br> 60px 60px 0 2px #e91e63, <br> 0 0 0 2px transparent;<br> }<br> 25% {<br> box-shadow: <br> 0 -125px 0 2px #e91e63, <br> -60px -60px 0 2px #e91e63, <br> -60px 60px 0 2px #e91e63, <br> 60px 60px 0 2px #e91e63, <br> 0 0 0 2px #fff;<br> }<br> 50% {<br> box-shadow: <br> 0 -125px 0 2px #e91e63, <br> -125px 0px 0 2px #e91e63, <br> -60px 60px 0 2px #e91e63, <br> 60px 60px 0 2px #e91e63, <br> 0 0 0 2px #fff;<br> }<br> 75% {<br> box-shadow: <br> 0 -125px 0 2px #e91e63, <br> -125px 0px 0 2px #e91e63, <br> 0px 125px 0 2px #e91e63, <br> 60px 60px 0 2px #e91e63, <br> 0 0 0 2px #fff;<br> }<br> 100% {<br> box-shadow: <br> 0 -125px 0 2px #e91e63, <br> -125px 0px 0 2px #e91e63, <br> 0px 125px 0 2px #e91e63, <br> 120px 40px 0 2px #e91e63, <br> 0 0 0 2px #fff;<br> }<br>}<br></style><br><div class="container"><br> <div class="shadow">web 秀</div></div><br></div> |
从浅到深的学习 CSS3阴影(box-shadow)
未经允许不得转载：一点博客-青梅煮码-共享博客 » 从浅到深的学习 CSS3阴影(box-shadow)
评论抢沙发