box-shadow盒子阴影几种用法

news/2024/2/29 2:50:54

box-shadow盒子阴影
语法:

    外阴影:box-shadow: X轴  Y轴  Rpx   color;

    属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值(大小)    阴影的颜色

    内阴影:box-shadow: X轴  Y轴  Rpx  color  inset;

默认是外阴影 。内阴影:inset 可以设置成内部阴影

   

注(PS):此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是用来设置文字阴影,如果设置文字阴影请参考知识点:text-shadow(同理)

     因为是新属性,为了兼容各主流浏览器并支持这些主浏览器的较低版本,基于主流浏览器上使用box-shadow属性时,

     我们需要将属性的名称写成-webkit-box-shadow的形式,

     Firefox浏览器则需要写成-moz-box-shadow的形式,

     欧朋浏览器  -o-box-shadow   IE>9  -ms-box-shadow  。

以下是一个例子:

html+css:
 

<div class="routineLearn"><a href="javascript:;">了解更多小程序解决方案 >></a></div>
.routineLearn a {display: inline-block;font-size: 22px;color: #ffffff;background: #405DE6;border-radius: 10px;padding: 16px 56px;text-align: center;
}.routineLearn a:hover {opacity: .9;box-shadow: 0 0px 3px 4px rgba(64,93,230,0.6);-webkit-box-shadow: 0 0px 3px 4px rgba(64,93,230,0.6);  //Google Chrome-moz-box-shadow: 0 0px 3px 4px rgba(64,93,230,0.6);  //Firefix-o-box-shadow: 0 0px 3px 4px rgba(64,93,230,0.6);  //opera-ms-box-shadow: 0 0px 3px 4px rgba(64,93,230,0.6);  //IE-webkit-transition: all .25s linear;-moz-transition: all .25s linear;-ms-transition: all .25s linear;-o-transition: all .25s linear;transition: all .25s linear;
}

效果:

 鼠标hover之后的效果:四周均有阴影

 


https://www.jiucaihua.cn/news/show-4626279.html

相关文章

Vulkan Tutorial 8 深度缓冲

目录 26 三维几何图形 深度图像和视图 27 显式转换深度图像 渲染通道 帧缓冲区 清除值 深度和模版状态 处理窗口调整大小 26 三维几何图形 到目前为止&#xff0c;我们所处理的几何体是投射到三维的&#xff0c;但它仍然是完全平面的。在这一章中&#xff0c;我们要给位…

股票买卖篇(II,III,IV)--基础,详细!状态机简单应用

目录 股票买卖II 本题思路 关于异常值的解释 代码 股票买卖III 本题思路 (包括对交易过程的理解&#xff0c;需认真理解) 代码 股票买卖 IV 本题思路 代码 股票买卖II 输入样例 6 7 1 5 3 6 4 输出样例 7 输入样例 5 1 2 3 4 5 输出样例 4 本题思路 该题是最…

linux基础知识学习记录

这里写自定义目录标题 一、 计算机基础知识二 、 Linux操作系统的介绍三、 Linux的安装四、Linux命令使用汇总 一、 计算机基础知识 计算机组成&#xff1a;计算机主要硬件和软件2部分组成。计算机软硬件的概念&#xff1a;硬件是可以看得见的物理实体&#xff0c;软件是运行在…

Cubase12没有声音解决办法(Windows 11专用)

本文章由CSDN 不想加班呀 原创&#xff0c;转载请注明出处。 作者首页&#xff1a;不想加班呀的博客_CSDN博客-Python爬虫,电脑小知识,程序员剪视频领域博主 目录 前言 解决办法 第一步&#xff08;进入系统硬件和声音设置界面&#xff09; 第二步&#xff08;在声音设置中…

(学习日记)2023.04.27

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

柔性车间作业调度

1柔性车间作业调度 n n n个工件 { J 1 , J 2 , ⋯ , J n } \{J_1,J_2,\cdots,J_n\} {J1​,J2​,⋯,Jn​}要在 m m m台机器 { M 1 , M 2 , ⋯ , M m } \{M_1,M_2,\cdots,M_m\} {M1​,M2​,⋯,Mm​}上加工。每个工件包含一道或多道工序&#xff0c;工序顺序是预先确定的&#xf…

微信小程序获取手机号码 phonenumber.getPhoneNumber 提示47001错误

微信小程序获取手机号码 phonenumber.getPhoneNumber 提示47001错误 微信小程序获取客户端手机号码&#xff0c;踩的坑。如下提示&#xff1a; {"errcode":47001,"errmsg":"data format error hint: [6kMDxSDNRa-hAwqia] rid: 6308d1b5-69935bc9-1d9…

大数据:spark环境搭建,local模式,standalone模式,zookeeper standby,yarn模式

大数据&#xff1a;spark环境搭建&#xff0c;local模式 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测开 测开的话&#xff0c;你就得学数据库&#xff0c;sql&#xff0c;or…

大专毕业,从6个月开发转入测试岗位的一些感悟——写在测试岗位3年之际

时光飞逝&#xff0c;我从前端开发岗位转入测试岗位已经三年了&#xff0c;这期间从迷茫到熟悉&#xff0c;到强化&#xff0c;到熟练&#xff0c;到总结&#xff0c;感受还是很深的&#xff01; 三年前的某一个晚上&#xff0c;我正准备下班回家&#xff0c;我们的项目经理把…

初阶二叉树的相关性质定理及题目练习

前言&#xff1a; 前面我们介绍了初阶二叉树的相关知识&#xff0c;二叉树常考的还是链式二叉树&#xff0c;而且二叉树也会考很多选择题&#xff0c;本文重点是在给出一些常考的二叉树的性质定理推导和经典练习题目配合强化巩固知识。 目录 一、二叉树的常见性质定理 二、常…