box-shadow单边阴影的实现


Posted in HTML / CSS onMay 21, 2023

box-shadow 参数说明

box-shadow: h-shadow v-shadow blur spread color inset

h-shadow(X轴)必需

第一个长度值指明了阴影水平方向的偏移,即阴影在 x 轴的位置。值为正数时,阴影在元素的右侧;值为负数时,阴影在元素的左侧。

v-shadow(Y轴)必需

第二个长度值指明了阴影竖直方向的偏移,即阴影在 y 轴的位置。值为正数时,阴影在元素的下方;值为负数时,阴影在元素的上方。

blur(模糊距离)可选

第三个长度值代表了阴影的模糊半径,举例来说,就是你在设计软件中使用高斯模糊滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的,完全完全没有模糊效果。blur 值越大,阴影则更不锋利而更朦胧 / 模糊。负值是不合法的,会被修正成 0。

spread(阴影范围)可选

第四个长度代表了阴影扩展半径,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小。

color (阴影的颜色) 可选

inset (内部阴影) 可选

box-shadow 四边阴影单独设置

<html>
    <style>
        .box-shadow-top{
            box-shadow: 0 -1px; /* 上外阴影,y坐标向上偏移,x不偏移 */
        }
        .box-shadow-bottom{
            box-shadow: 0 1px; /* 下外阴影 */
        }
        .box-shadow-left{
            box-shadow: -1px 0; /* 左外阴影 */
        }
        .box-shadow-right{
            box-shadow: 1px 0 ; /* 右外阴影 */
        }
        .box-shadow-top-inset{
            box-shadow:inset 0 1px; /* 上内阴影 */
        }
        .box-shadow-bottom-inset{
            box-shadow:inset 0 -1px; /* 下内阴影 */
        }
        .box-shadow-left-inset{
            box-shadow:inset 1px 0; /* 左内阴影 */
        }
        .box-shadow-right-inset{
            box-shadow:inset -1px 0 ; /* 右内阴影 */
        }
        .left{
            display:inline-block;
            background-color: antiquewhite;
            width: 100px;
            height: 100px;
        }
        div{    
            margin: 5px ;
            line-height: 100px;
            text-align: center;
        }
    </style>
    <body>
        <div>
            <div class="box-shadow-top left">
                上外阴影
            </div>
            <div class="box-shadow-bottom left">
                下外阴影
            </div>
            <div class="box-shadow-left left">
                左外阴影
            </div>
            <div class="box-shadow-right left">
                右外阴影
            </div>
        </div>
        <div>
            <div class="box-shadow-top-inset left">
                上内阴影
            </div>
            <div class="box-shadow-bottom-inset left">
                下内阴影
            </div>
            <div class="box-shadow-left-inset left">
                左内阴影
            </div>
            <div class="box-shadow-right-inset left">
                右内阴影
            </div>
        </div>
    </body>
</html>

设置效果如下:

阴影的颜色通常是使用纯色,当然也可以使用渐变色。

box-shadow单边阴影的实现

到此这篇关于box-shadow单边阴影的实现的文章就介绍到这了,更多相关box-shadow单边阴影内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 #HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 #HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 #HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 #HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 #HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 #HTML / CSS
You might like
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
详解微信第三方小程序代开发
2017/06/23 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
python实现bitmap数据结构详解
2014/02/17 Python
Python生成器generator用法示例
2018/08/10 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
自荐信怎么写好
2013/11/11 职场文书
行政助理工作职责范本
2014/03/04 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
博士论文答辩开场白
2015/06/01 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
redis 解决库存并发问题实现数量控制
2022/04/08 Redis