如何给边框添加阴影效果:box-shadow

article/2025/9/17 8:56:22

css的box-shadow是用来添加边框阴影效果的。


属性值详解:

1、inset
可选值,默认阴影在盒子外
使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴影依然存在。

2、<offset-x> <offset-y>
这是头两个<length> 值,用来设置阴影偏移量。offset-x为设置阴影的水平位移,假如是负值,那么阴影在边框的左侧;offset-y设置阴影的垂直位移,假如是负值,那么阴影位于边框顶部。这个用数学中的数轴来理解应该是可以的,如下图:
css数轴

我们的水平原点是以边框的左上角为起始点,x为水平位移,Y为垂直位移。

3、<blur-radius>
指定模糊半径,不允许负值,假如设置为0,则阴影不模糊,否则设置越大的值,边框阴影就越模糊。

4、<spread-radius>
指定阴影拓展,假如设置为0,不拓展,正值阴影扩大,负值缩小。


demo:

(1)输入框内阴影

.shadow (
     -moz-box-shadow: inset 0 0 10px #CCC;
     -webkit-box-shadow: inset 0 0 10px #CCC;
     box-shadow: inset 0 0 10px #CCC;


(2)简单效果
.one (
     -moz-box-shadow:5px 5px;
     -webkit-box-shadow:5px 5px;
     box-shadow:5px 5px;


(3)虚阴影效果
.two (
     -moz-box-shadow:2px 2px 10px #06c;
     -webkit-box-shadow:2px 2px 10px #06c;
     box-shadow:2px 2px 10px #06c;


(4)渐变阴影效果
.three (
     -moz-box-shadow:0 0 10px #06c;
    


http://chatgpt.dhexx.cn/article/t5ktjj0Y.shtml

相关文章

css中设置边框阴影效果

在进行前端页面设计的时候&#xff0c;过于线条化的边框常常显得不太友好。为了解决这个问题&#xff0c;CSS中有专门设置边框阴影的属性box-shadow。 支持box-shadow属性的浏览器&#xff1a;IE9、Firefox 4、Chrome、Opera 以及 Safari 5.1.1。 box-shadow的用法&#xff1a;…

怎样给边框添加阴影?CSS3属性box-shadow帮你搞定!

作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 &#x1f449; WangMin 关于box-shadow属性&#xff0c;有的小伙伴可能用的时候直接复制已有的&#xff0c;并没有仔细了解过box-shadow属性的参数分别是什么含义&#xff0c;最后导致阴影的样式不能按照自…

边框、边距、阴影

边框、边距、阴影 1.边框&#xff08;1&#xff09;边框属性&#xff1a;&#xff08;2&#xff09;设置不同方向的边框&#xff1a;&#xff08;3&#xff09;圆角边框&#xff1a;border-radius&#xff1a; 2.边距&#xff08;1&#xff09;内边距&#xff1a;padding&#…

给三角形添加边框阴影

需求&#xff1a;利用div边框形成了一个三角形&#xff0c;然后给这个三角形添加边框阴影 解决方法&#xff1a;利用filter这个css3属性&#xff0c;配合属op-shadow实现效果 首先弄一个普通的三角形出来&#xff1a; 可以发现&#xff1a;通过设置div边框得到的三角形&#x…

box-shadow上下左右四个边框设置阴影样式

box-shadow上下左右四个边框设置阴影样式 语法值 / 说明四个不同样式加点阴影实现效果比如这样的: 语法 box-shadow: h-shadow v-shadow blur spread color inset;注意&#xff1a;boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表&#xff0…

CSS 边框 阴影 效果

CSS 边框 阴影 效果 下面将css实现阴影效果&#xff0c;以便需要朋友们&#xff0c;直接上代码 #shadow1{ width: 200px; height: 100px; color: white; background-color: red; box-shadow: 5px -5px 1px 1px #000; -webkit-box-shadow:5px -5px 1px 1px #000; -moz-box-sha…

box-shadow四个边框设置阴影样式

其实对于box-shadow&#xff0c;老白我也是一知半解&#xff0c;之前用的时候直接复制已有的&#xff0c;也没有仔细思考过box-shadow的数值分别对应什么&#xff0c;最后导致阴影的边如何自由控制&#xff0c;苦于懒人一个一直没有正式去学习&#xff0c;今天无意中看到以下这…

html边框阴影咋设置,css阴影边框怎么设置

css阴影边框的设置方法&#xff1a;首先新建一个html文件&#xff1b;然后在这个html文件上创建两个【 】用来设置阴影边框&#xff1b;最后这两个div添加样式类为in、out。 本教程操作环境&#xff1a;windows10系统、css3版&#xff0c;DELL G3电脑&#xff0c;该方法适用于所…

如何给边框添加阴影效果

css的box-shadow是用来添加边框阴影效果的。 属性值详解&#xff1a; 1、inset 可选值&#xff0c;默认阴影在盒子外 使用inset后&#xff0c;阴影在盒子内&#xff0c;即使指定边框或者透明边框&#xff0c;阴影依然存在。 2、<offset-x> <offset-y> 这是头两个&l…

css添加边框阴影

css边框阴影如何设置&#xff1f; 语法&#xff1a; <style> box-shadow: h-shadow v-shadow blur spread color inset; </style> 取值&#xff1a; h-shadow&#xff1a;必需设置的值&#xff0c;定义水平阴影的位置。允许负值。 v-shadow&#xff1a;必需设置…

css边框设置阴影样式

css边框设置阴影样式 box-shadow上下左右四个边框设置阴影样式 语法值/说明四个不同样式实现效果 语法 box-shadow: h-shadow v-shadow blur spread color inset;注意&#xff1a;boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表&#xf…

css添加边框阴影上、下、左、右详解

Css边框阴影&#xff1a;box-shadow属性 对于这个属性&#xff0c;总是记了又忘&#xff0c;忘记了又看百度&#xff0c;今天总结一下&#xff1b; 语法&#xff1a; box-shadow: h-shadow v-shadow blur spread color inset;注意&#xff1a;boxShadow 属性把一个或多个下拉…

【IMX6ULL驱动开发学习】02.IMX6ULL烧写Linux系统

由于我买的是正点原子的IMX6ULL阿尔法开发板&#xff0c;但是我是看韦东山老师视频学习的驱动 所以这里我烧录的方法是按照韦东山老师的课程来的 这里给出烧写Linux系统用到的工具 链接&#xff1a;https://pan.baidu.com/s/1bD-xxn3K8xQAVkJSaJmTzQ 提取码&#xff1a;af6w …

iMX6ULL启动流程

iMX6ULL启动流程 1. Boot ROM2. IVT和DCD3. 启动流程4. 总结 我移植的板子是讯为的TERMINATOR_V1.1开发板&#xff0c;参考板为官方 i.MX6ULL EVK开发板。 iMX6ULL uboot2021.04 linux5.15.32移植iMX6ULL启动流程iMX6ULL u-boot2021.04移植iMX6ULL linux5.15.32移植iMX6ULL bui…

IMX6ULL_Pro网卡配置

(15条消息) 【IMX6ULL_Pro板卡学习】配置 VMware 使用双网卡_vmware配置双网卡_爱学习的小莲的博客-CSDN博客https://blog.csdn.net/qq_52201194/article/details/127474352?ops_request_misc%257B%2522request%255Fid%2522%253A%2522168223524716800182730924%2522%252C%2522…

imx6 adb移植

参考https://blog.csdn.net/kunkliu/article/details/122746762 一、buildroot配置 1.udev必须选上 System configuration下 2.打开adb进程支持 3.添加配置脚本 &#xff08;1&#xff09;etc/init.d下创建文本文件 S91usb&#xff0c;内容如下&#xff08;注释掉了csdn中的两…

imx6设备树pinctrl解析

最近在移植linux&#xff0c;用到kernel版本为3.14.28&#xff0c;在高版本的内核源码中用到了设备树&#xff08;device-tree&#xff09;&#xff0c;设备树中用到pinctrl的配置&#xff0c;记录一下。 1、普通设置 在配置串口时&#xff0c;pinctrl的配置信息如下所示&#…

IMX6UL核心板

CPU:IMX6UL DDR:256M EMMC:4G NANDFLASH:1G 分立DCDC 需定制请联系QQ402979209 广州瀚忆科技有限公司 http://www.gzhysmart.com/

imx6 LCD 参数配置(lvds为例)

目前imx6的BSP开发中&#xff0c;lvds的参数配置一般在两个地方&#xff1a; 1. uboot的CMDLINE的参数设置&#xff0c;形如&#xff1a; videomxcfb0:devldb,bpp32 2. uboot板级代码中对struct display_info_t的配置&#xff0c;形如&#xff1a; static struct display_i…

IMX6U主频详解和配置

IMX6U默认396Mhz主频 可以达到528Mhz 一、时钟来源及组成 1、时钟的来源都是晶振 32.768khz的晶振 给RTC使用 24MHz的晶振给系统来使用 接在T16和T17这两个IO上 2、芯片时钟构成 七路PLL 全都由24Mhz晶振产生 使用这些的原因是为了方便外设使用 倍频产生 ①ARM PLL供给AR…